如何發布具有 commonjs 和 es6 版本的 NPM 模塊？

Question

我有一個模塊要發布到 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/核心 v7.10.5

Answer 1

您可以使用webpack類的捆綁程序，或者將rollup與babel結合使用。 它們提供了編譯到多個目標的選項。 通常，任何庫代碼都會編譯為以下目標：

1. ESM 或 MJS（Ecmascript 模塊）
2. UMD（通用模塊）

您還可以編譯為 CJS（CommonJS 模塊）或 IIFE（立即調用 function 表達式）。

如今，UMD 和 ESM 幾乎是標准的（尤其是 UMD，因為它是 IIFE、CJS 和 AMD 的組合）。

您可以瀏覽 Webpack 或 Rollup 的官方文檔。 但是，我創建了一個工具，您可以使用它來實現您正在尋找的 output。 https://www.npmjs.com/package/rollup-boilerplate

你可以檢查它，玩弄它，破解它。 我認為這可能是一個很好的起點。 您可以查看這篇文章以開始： https://medium.com/@contactsachinsingh/setting-up-a-rollup-project-under-two-minutes-fc838be02d0e