如何同时发布具有commonjs和ES6版本的NPM模块？

How can I publish an NPM module with both commonjs and es6 versions?(如何同时发布具有commonjs和ES6版本的NPM模块？)

问题描述

我有一个模块要发布到NPM。我发现了一些已有4年多历史的解决方案、使用Babel 5.x的示例以及使示例无法按所示方式工作的其他问题(&Q；解决方案&Q；)。

理想情况下，我希望使用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吗？我应该只要求普通食品吗？有没有办法用两个可用目标进行转运？

注意：

• 节点v14.5.0
• NPM v6.14.6
• @babel/core v7.10.5

推荐答案

您可以将webpack或rollup这样的绑定器与babel结合使用。它们提供编译成多个目标的选项。通常，任何库代码都编译到以下目标：

1. ESM或MJS(ECMAScript模块)
2. UMD(通用模块)

您还可以编译为CJS(CommonJS模块)或LIFE(立即调用函数表达式)。

UMD和ESM现在几乎是标准的(特别是UMD，因为它是LIFE、CJS和AMD的组合)。

您可以浏览webpack或ROLLUP的官方文档。不过，我已经创建了一个工具，您可以使用它来实现您正在寻找的输出。https://www.npmjs.com/package/rollup-boilerplate

你可以查看它，玩它，黑它。我认为这可以是一个很好的起点。您可以签出本文开始：https://medium.com/@contactsachinsingh/setting-up-a-rollup-project-under-two-minutes-fc838be02d0e

这篇关于如何同时发布具有commonjs和ES6版本的NPM模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！