我有一个要发布到 npm 的模块。我发现了一些 4 年以上的“解决方案”、使用 babel 5.x 的示例以及其他导致示例无法正常工作的问题。
理想情况下,我想使用 es6 编写代码并使用 babel 构建/转换,以便可以使用 require()
导入它。在脚本或 import
在模块中。
现在,这是我的(示例)模块,它显示了我尝试过的内容。
// 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"
}
}
最后,一个演示脚本 (demo.js)// demo.js
const speak = require('./dist/index.js');
speak();
当我做 npm run build
然后 node demo.js
,它按预期工作:Hello, World!
我还希望能够拥有一个模块(将 "type":"module"
添加到 package.json),然后以这种方式使用 demo.js 文件:import speak from './dist/index.js';
speak();
但是,我收到默认导出不可用的错误消息:import speak from './dist/index.js';
^^^^^
SyntaxError: The requested module './dist/index.js' does not provide an export named 'default'
我真的不在乎答案是什么,我只想知道最佳实践是什么。我应该只导出为 ES6 吗?我应该只需要commonjs吗?有没有办法用两个可用目标进行转换?笔记:
最佳答案
您可以使用 webpack
之类的捆绑程序或 rollup
结合 babel
.它们提供了编译到多个目标的选项。通常,任何库代码都会编译为以下目标:
您还可以编译为 CJS(CommonJS 模块)或 IIFE(立即调用的函数表达式)。
如今,UMD 和 ESM 几乎是标准的(尤其是 UMD,因为它是 IIFE、CJS 和 AMD 的组合)。
您可以浏览 Webpack 或 Rollup 的官方文档。但是,我创建了一个工具,您可以使用它来实现您正在寻找的输出。 https://www.npmjs.com/package/rollup-boilerplate
你可以检查它,玩弄它,破解它。我认为这可能是一个很好的起点。您可以查看这篇文章以开始使用:https://medium.com/@contactsachinsingh/setting-up-a-rollup-project-under-two-minutes-fc838be02d0e
关于javascript - 如何发布同时具有 commonjs 和 es6 版本的 NPM 模块?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63121593/