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

奇怪的是，我在另一个应用程序中运行（几乎） EXACT 相同的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，打破完全向下并抛出像Uncaught SyntaxError: Use of const in strict mode这样的ES6错误。所以它显然没有向ES5进行编译。帮助！）

Answer 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为目标，因此与主服务器不兼容   uglifyjs的分支。你可以：


使用支持ES6的babili

使用uglifyjs的和谐分支

坚持使用2.x.x分支

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

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

1 个答案: