文章/答案/技术大牛

发布

问webpack 2丑陋的插件ES6
EN

Stack Overflow用户

提问于 2017-08-24 14:13:06

回答 1查看 3.5K关注 0票数 3

我使用webpack来捆绑用ES6编写的模块react。在我添加json-不变插件之前，所有这些都已经开始工作了。需要的是json-stream-stringify，还有一个类：

class JSONStreamify extends CoStream {...}
module.exports = function(obj, replacer) {
    return new JSONStreamify(obj, replacer);
};

webpack工作良好，但不是monify文件，因为Uglify抛出错误。

Unexpected token: name (JSONStreamify)

我在这里找到了有关模块https://github.com/webpack-contrib/uglifyjs-webpack-plugin的信息。我安装并添加了ecma支持，但仍然存在相同的错误。我尝试过删除，我尝试过添加、排除、node_modules，但是没有结果。

我的webpack.config.js是

const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  entry: {
    backend: './src/backend.js',
    frontend: './src/frontend.js',
  },
  output: {
    path: path.resolve(__dirname,'./dist'),
    filename: '[name].sakui.min.js'
  },
  externals: {
    'jQuery':'jQuery',
    'Foundation':'Foundation',
    'react': 'React',
    'react-dom': 'ReactDOM',
    'redux': 'Redux',
    'react-redux': 'ReactRedux',
    'immutable': 'Immutable',
    'lodash': '_',
    '_': '_'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            "only": "src/**",
            "presets": [
              "env",
              "react",
              "es2017",
              "stage-3"
            ],
            "plugins": [["transform-class-properties", { "spec": true }],"transform-decorators-legacy","minify-simplify"],
            "babelrc": false
          }
        }
      }
    ]
  },
  plugins: [
    new UglifyJSPlugin({
      ecma: 6
    })
  ]
}

有什么提示我能解决这个问题吗？webpack之后，可能有什么外部工具来缩小档案吗？

javascript

webpack

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-24 15:20:33

解决方案：

我发现的一种方法是，通过babel将所有的node_modules转到ES5，这样就能工作了。

我的webpack.config.js

const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  entry: {
    backend: './src/backend.js',
    frontend: './src/frontend.js',
  },
  output: {
    path: path.resolve(__dirname,'./dist'),
    filename: '[name].sakui.min.js'
  },
  externals: {
    'jQuery':'jQuery',
    'Foundation':'Foundation',
    'react': 'React',
    'react-dom': 'ReactDOM',
    'redux': 'Redux',
    'react-redux': 'ReactRedux',
    'immutable': 'Immutable',
    'lodash': '_',
    '_': '_'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            "presets": [
              "env",
              "react",
              "es2017",
              "stage-3"
            ],
            "plugins": [["transform-class-properties", { "spec": true }],"transform-decorators-legacy"],
            "babelrc": false
          }
        }
      }
    ]
  },
  plugins: [
    new UglifyJSPlugin()
  ]
}

也许会对某人有用。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45863925

复制

相似问题

问webpack 2丑陋的插件ES6
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问webpack 2丑陋的插件ES6EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问webpack 2丑陋的插件ES6
EN