node.js - 如何在没有任何 babel 依赖的情况下发布 npm 模块？

Question

我正在构建一个 npm 项目(moduleA)并将发布到 npm 注册表。它使用带有 webpack4 和 babel7 的 javascript。它本身工作得很好，但是当我尝试从不同的模块测试该项目时，会出现一些 babel 问题。测试项目使用 babel 6.26.3 和 webpack2。当我构建测试项目时，出现以下错误:

ERROR in /Users/dev/moduleA/build/index.js
Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded
 with "6.26.3". If you are sure you have a compatible version of 
@babel/core, it is likely that something in your build process is loading 
the wrong version. Inspect the stack trace of this error to look for the 
first entry that doesn't mention "@babel/core" or "babel-core" to see what 
is calling Babel.

上面错误输出中的第一行是关于具有 babel7 依赖项的 moduleA 包。我希望来自 moduleA 的构建工件不应包含有关 babel 的任何信息。但看起来 moduleA 将 babel7 带入测试项目，与测试项目 babel6 冲突。我该如何解决 moduleA 中的这个问题？

下面是moduleA babelrc配置:

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-async-to-generator",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-syntax-export-default-from",
    "@babel/plugin-proposal-export-namespace-from"
  ]
}

moduleA 中的 babel 依赖项是:

"devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.0",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-proposal-decorators": "^7.2.3",
    "@babel/plugin-proposal-export-default-from": "^7.2.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
    "@babel/plugin-proposal-function-sent": "^7.2.0",
    "@babel/plugin-proposal-json-strings": "^7.2.0",
    "@babel/plugin-proposal-numeric-separator": "^7.2.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
    "@babel/plugin-proposal-throw-expressions": "^7.2.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-syntax-export-default-from": "^7.2.0",
    "@babel/plugin-syntax-import-meta": "^7.2.0",
    "@babel/plugin-transform-arrow-functions": "^7.2.0",
    "@babel/plugin-transform-async-to-generator": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    ...

Answer 1

您可能希望将要传送的文件分成两个:src 和 dist。

src 将包含需要 Babel 和 Webpack 才能运行的原始代码。

dist 是编译版本，很可能是 ES5 代码，无需使用 Babel 或 Webpack 即可运行。

请参阅 Webpack 文档来创建针对生产进行优化的编译版本:https://webpack.js.org/guides/production

成功编译代码后，使用 package.json 文件中的 main 属性指向已编译的版本，而不是源(原始)版本。