Babel.js 如何发布一个同时包含commonjs和es6版本的NPM模块?

4xrmg8kj  于 7个月前  发布在  Babel
关注(0)|答案(2)|浏览(104)

我有一个模块我想发布到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吗?有没有一种方法可以用两个可用的目标进行转译?

  • 备注:*
    • 节点v14.5.0*
  • npm v6.14.6
  • @babel/core v7.10.5*
xam8gpfp

xam8gpfp1#

您可以将webpackrollup等编译器与babel结合使用。它们提供了编译到多个目标的选项。通常任何库代码都编译到以下目标:

  1. ESM或MJS(Ecmascript模块)
  2. UMD(通用模块)
    您也可以编译为CJS(CommonJS模块)或IIFE(立即调用函数表达式)。
    UMD和ESM现在几乎是标准的(尤其是UMD,因为它是IIFE,CJS和AMD的组合)。
    您可以浏览Webpack或Rollup的官方文档。然而,我已经创建了一个工具,您可以使用它来实现您正在寻找的输出。https://www.npmjs.com/package/rollup-boilerplate
    你可以检查它,玩它,破解它。我认为这可以是一个很好的起点。你可以 checkout 这篇文章开始:https://medium.com/@contactsachinsingh/setting-up-a-rollup-project-under-two-minutes-fc838be02d0e
ssm49v7z

ssm49v7z2#

我讨厌通过添加构建步骤和在不必要的时候拉入巨大的支持库来使我的包复杂化。为了支持CommonJS require和ES6 import.. from,你不需要“像webpack或rollup这样的编译器与babel的组合”。
1.为CommonJS和Es6提供单独的入口点(也称为“main”)脚本,如“x.cjs”和“x.mjs”。
1.在package.json中,将type设置为module。
1.在package.json中添加一个新的顶级元素,如下所示:
在package.json中将type设置为模块。4.根据需要将其他源文件源化为 *.cjs和 *.mjs

相关问题