Striptags NPM 导致 Webpack / Babel / React ES6 编译错误答案

【问题标题】：Striptags NPM causes Webpack / Babel / React ES6 compile errorStriptags NPM 导致 Webpack / Babel / React ES6 编译错误
【发布时间】：2018-03-11 17:55:43
【问题描述】：

我在 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']
      }
    ]
  }
};

奇怪的是，我有 (几乎) EXACT 相同的 webpack / babel 配置在另一个应用程序中运行并使用零个问题。我什至添加了一些东西，比如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，会中断完全关闭并抛出像Uncaught SyntaxError: Use of const in strict mode这样的ES6错误。所以它显然不是向下编译到ES5。帮助！）

【问题讨论】：

工作配置和非工作配置有什么区别？我将从那里开始，检查配置文件和两个package.json 文件中的diff 以确定版本差异。
在那条路上走了几次，似乎找不到任何相关的差异:(
Do not post images of code or errors
好的，很好，虽然该图像是用于简单的上下文而不是来自 webpack 编译器的真正有用的原始输出，如果你真的想要原始错误 - 这里：ERROR in background.js from UglifyJs Unexpected token: name (context) [background.js:24622,12]

标签： node.js reactjs webpack babeljs

【解决方案1】：

在系统地检查我们的代码并删除单个 require() 调用数小时后，我发现了问题的根源。

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

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

来自striptags 文档：

注意：v3+ 以 ES6 为目标，因此与 master 不兼容 uglifyjs 的分支。您可以：

使用支持ES6的babili

使用uglifyjs的和谐分支

坚持使用 2.x.x 分支

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

【讨论】：