admin管理员组文章数量:1326478
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
{
"ments":false,
"presets": [
["@babel/env", {"modules": "monjs"}]
],
"plugins": [
"@babel/plugin-transform-modules-monjs",
"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-monjs": "^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 monjs? Is there a way of transpiling with two available targets?
Note:
- node v14.5.0
- npm v6.14.6
- @babel/core v7.10.5
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
{
"ments":false,
"presets": [
["@babel/env", {"modules": "monjs"}]
],
"plugins": [
"@babel/plugin-transform-modules-monjs",
"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-monjs": "^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 monjs? Is there a way of transpiling with two available targets?
Note:
- node v14.5.0
- npm v6.14.6
- @babel/core v7.10.5
2 Answers
Reset to default 2You can use a bundler like webpack
or rollup
in bination with babel
. They provide options to pile to multiple targets. Normally any library code is piled to below targets:
- ESM or MJS (Ecmascript modules)
- UMD (Universal Modules)
You can also pile to CJS (CommonJS module) or IIFE (Immediately invoked function expression).
UMD and ESM are pretty much standard these days (esp. UMD because it is bination 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./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./@contactsachinsingh/setting-up-a-rollup-project-under-two-minutes-fc838be02d0e
I hate plicating my packages by adding build steps and pulling in huge support libraries when they aren't necessary. To support both CommonJS require and ES6 import...from you don't need "a bundler like webpack or rollup in bination with babel".
- Provide separate entry-point (aka "main") scripts for CommonJS and for Es6 like "x.cjs" and "x.mjs".
- In package.json set type to module.
- In package.json add a new top-level element like this:
In package.json set type to module. 4. Rename source your other source files to *.cjs and *.mjs as needed
本文标签: javascriptHow can I publish an NPM module with both commonjs and es6 versionsStack Overflow
版权声明:本文标题:javascript - How can I publish an NPM module with both commonjs and es6 versions? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742207326a2433059.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论