javascript - 如何强制特定包的转译

Question

我正在使用react-boilerplate(dev)，并且在执行npm run build:prod时出现以下错误

cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --display-reasons --display-modules

..

Hash: 622954faf5a47209c873
Version: webpack 2.6.1 Time: 18561ms

ERROR in 0.ce0d924df6602f0a85c8.chunk.js from UglifyJs Unexpected token: name (listeners) [0.ce0d924df6602f0a85c8.chunk.js:1265,6]

..

代码部分是:

1261: "use strict";
1262: Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
1263: /* harmony export (immutable) */ __webpack_exports__["default"] = createBroadcast;
1264: function createBroadcast (initialState) {
1265:   let listeners = {}
1266:   let id = 0
1267:   let _state = initialState

这段代码好像没有被“转译”？

我目前有:

internals/webpack/webpack.base.babel.js:

  {
    test: /\.js$/, // Transform all .js files required somewhere with Babel
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: options.babelQuery,
    },
  },

package.json:

  "babel": {
    "plugins": [
      "styled-components"
    ],
    "presets": [
      [
        "env",
        {
          "modules": false
        }
      ],
      "react",
      "es2015",
      "es2016",
      "stage-0"
    ],
    "env": {
      "production": {
        "only": [
          "app"
        ],
        "plugins": [
          "transform-react-remove-prop-types",
          "transform-react-constant-elements",
          "transform-react-inline-elements"
        ]
      },
      "test": {
        "plugins": [
          "transform-es2015-modules-commonjs",
          "dynamic-import-node"
        ]
      }
    }

我也尝试过:

"presets": [
  [
    "env",
    {
      "modules": false,
      "targets": {
        "uglify": 2
      }
    }
  ],
  "es2015",
  "es2016",
  "stage-0",
  "react"
],

Answer 1

如果node_modules中有ES6，一般方法是更改​​

exclude: /node_modules/

至

exclude: /node_modules\/(?:specificModule)/

这样您就可以排除除某些特定模块之外的所有 Node 模块。

此外，鉴于您的错误

ERROR in ./~/react-jss/lib/jss.js Module build failed: ReferenceError: Unknown plugin "transform-es3-member-expression-literals" specified in "xxxx/node_modules/react-jss/.babelrc" at 0` error

你的选择是有限的。这意味着 react-jss 模块正在其 npm 包中发布其 .babelrc 文件，正是出于这个原因，不建议这样做。该配置将尝试在该模块中的文件上运行，但该配置正在使用您尚未安装的插件，并且由于它们可能是 react-jss 中的 devDependency，因此它们不会被安装通常情况下。

解决此错误的唯一方法是禁用 .babelrc 处理，或在您自己的依赖项中显式安装该插件。两者都不是特别有吸引力。因此在 babelQuery 中传递 babelrc: false

{
  loader: 'babel-loader',
  options: options.babelQuery,
}

然后将 Babel 配置从其配置文件中移出并移至 Webpack 配置文件本身。