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

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

该网页包看起来是编译的，但是UglifyJS在完成后马上抛出了eval错误——就像巴贝尔根本没有将React/ES6代码编译成ES5一样

这是我的网页配置：

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配置，并且编译时没有任何问题。我甚至还添加了一些东西，比如巴贝尔·波利菲勒（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代码的存在，直接导致传统浏览器崩溃。当我从网页包中完全删除UglifyJS时，代码将编译并上传到Heroku。它可以根据日志建立良好的性能。而且，在Chrome60等现代浏览器上，它运行得非常好。但切换到显式不支持ES6的浏览器，如iOS 9上的Safari或Chrome的旧版本，会完全崩溃并抛出ES6错误，如未捕获的SyntaxError：在严格模式下使用const。所以很明显，这不是ES5的问题。救命啊

经过数小时的系统化代码处理和删除单个require调用后，我发现了问题的根源

我们使用一个名为striptags的NPM模块——去除应用程序中由外部CMS管理的某些副本上的HTML片段

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

从striptags文档中：

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

使用支持ES6的babili 使用uglifyjs的和声分支 坚持使用2.x.x分支

---

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

在系统地浏览了我们的代码并删除了单个require调用之后，我发现了问题的根源

我们使用一个名为striptags的NPM模块——去除应用程序中由外部CMS管理的某些副本上的HTML片段

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

从striptags文档中：

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

使用支持ES6的babili 使用uglifyjs的和声分支 坚持使用2.x.x分支

---

我们选择明确地将striptags版本回滚到v2.2.1。

工作配置和非工作配置之间有什么区别？我将从这里开始，检查配置文件和两个package.json文件的差异，以确定版本差异。我在这条路上走了几次，似乎找不到任何相关的差异：好的，好的，尽管该图像用于简单的上下文，并不是webpack编译器真正有用的原始输出，如果您真的想要原始错误-此处：UglifyJs中background.js中的错误意外标记：name context[background.js:24622,12]工作配置和非工作配置之间有什么区别？我将从这里开始，检查配置文件和两个package.json文件的差异，以确定版本差异。我在这条路上走了几次，似乎找不到任何相关的差异：好的，好的，尽管该图像用于简单的上下文，并不是webpack编译器真正有用的原始输出，如果您确实想要原始错误-此处：UglifyJs中background.js中的错误意外标记：name context[background.js:24622,12]