node.js - Striptags NPM导致Webpack/Babel/React ES6编译错误

Question

我在 React/Node 应用程序上运行 Babel/Webpack 时遇到了严重的编译错误。

Webpack 似乎可以编译，但 UglifyJS 在完成后会抛出 eval 错误 - 就像 Babel 根本没有将 React/ES6 代码编译成 ES5 一样。

这是我的 webpack 配置:

const path = require('path');
const webpack = require('webpack');
const WebpackStrip = require('strip-loader');

module.exports = {
  devtool: 'source-map',
  context: path.join(__dirname, './CLIENTSIDE/components'),
  entry: {
     background: ['babel-polyfill', './background'],
     uniqueShare: ['babel-polyfill', './uniqueShare'],
     starRating: ['babel-polyfill', './starRating'],
     testingPage: ['babel-polyfill', './testingPage'],
     style: ['babel-polyfill', './style']
  },
  output: {
    path: path.join(__dirname, 'CLIENTSIDE/static'),
    filename: '[name].js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({ mangle: true, sourcemap: false })
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: [
          path.resolve(__dirname, "node_modules"),
        ],
        use: [
          { loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['es2015', 'stage-0', 'react'],
              plugins: ['transform-runtime','transform-decorators-legacy', 'transform-object-assign', 'array-includes']
            }
          },
          { loader: WebpackStrip.loader('debug', 'console.log') }
        ],
      },
      {
          test: /\.scss$/,
          loaders: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
};

奇怪的是，我有(几乎) 完全相同相同的 webpack/babel 配置在另一个应用程序中运行并使用 < em>零 问题。我什至添加了一些像 babel-polyfill 这样的东西，但没有运气。

这是相关的package.json:

"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-array-includes": "^2.0.3",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"webpack": "^3.6.0"

它正在转译的代码之前已经进入生产模式，现在由于 ES6 代码的存在而直接导致旧版浏览器崩溃(当我从 Webpack 中完全删除 UglifyJS 时，代码将编译并上传到Heroku 很好。它根据日志构建得很好。而且，在 Chrome 60 等现代浏览器上，运行得很好。但是切换到明确不支持 ES6 的浏览器(例如 iOS 9 上的 Safari 或旧版本的 Chrome)会中断完全向下编译并抛出 ES6 错误，如 Uncaught SyntaxError: Use of const in strict mode。所以它显然不是向下编译到 ES5。HELP!) p>

Answer 1

经过几个小时系统地浏览我们的代码并删除各个 require() 调用后，我发现了问题的根源。

我们使用名为 striptags 的 NPM 模块 - https://www.npmjs.com/package/striptags - 删除由外部 CMS 管理的应用程序内某些副本上的 HTML 片段。

striptags v3.0.0+ 引入了一项重大更改，完全消除了与 UglifyJS 的兼容性，从而阻止我们的 Webpack 堆栈将代码编译到 ES5 中。 (从某种意义上说，@Kryten 是对的 - 我们从其他版本中删除了 striptags 包，并选择了不同的内容管理系统，我们相同的 Webpack 编译器正在该系统中工作)

来自 striptags 文档:

Note: v3+ targets ES6, and is therefore incompatible with the master branch of uglifyjs. You can either:

• use babili, which supports ES6
• use the harmony branch of uglifyjs
• stick with the 2.x.x branch

我们选择显式将 striptags 版本回滚到 v2.2.1。