I have a module I want to publish to npm. I have found some "solutions" that are 4+ years old, examples using babel 5.x, and other problems that made the examples not work as shown.
Ideally I want to write my code using es6 and build/transpile with babel such that it can be imported with require()
in scripts or import
in modules.
Right now, here's my (sample) module that shows what I've tried.
// index.js
export default function speak () {
console.log("Hello, World!");
}
// .babelrc
{
"comments":false,
"presets": [
["@babel/env", {"modules": "commonjs"}]
],
"plugins": [
"@babel/plugin-transform-modules-commonjs",
"add-module-exports"
]
}
// package.json
{
"name": "foo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel index.js -d dist"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.10.5",
"@babel/core": "^7.10.5",
"@babel/plugin-transform-modules-commonjs": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"babel-plugin-add-module-exports": "^1.0.2"
}
}
And, finally, a demo script (demo.js)
// demo.js
const speak = require('./dist/index.js');
speak();
When I do npm run build
and then node demo.js
, it works as expected:
Hello, World!
I would also like to be able to have a module (add "type":"module"
to package.json) and then use a demo.js file this way:
import speak from './dist/index.js';
speak();
However, I get this an error that a default export isn't available:
import speak from './dist/index.js';
^^^^^
SyntaxError: The requested module './dist/index.js' does not provide an export named 'default'
I don't really care what the answer is, I'd just like to know what the best practices are. Should I just export as ES6? Should I just require commonjs? Is there a way of transpiling with two available targets?
Note:
You can use a bundler like webpack
or rollup
in combination with babel
. They provide options to compile to multiple targets. Normally any library code is compiled to below targets:
You can also compile to CJS (CommonJS module) or IIFE (Immediately invoked function expression).
UMD and ESM are pretty much standard these days (esp. UMD because it is combination of IIFE, CJS and AMD).
You can explore official documentation for Webpack or Rollup. However, I have created a tool which you can use to achieve the output you are looking for. https://www.npmjs.com/package/rollup-boilerplate
You can check it out, play around with it, hack it. I think it can be good starting point. You can checkout this article to get started: https://medium.com/@contactsachinsingh/setting-up-a-rollup-project-under-two-minutes-fc838be02d0e