Question

我遇到了webpack的问题，并且一些node_modules库在输出的bundle中没有被“babelized”。最值得注意的是ES6语法，例如'const'。

到目前为止，我将通过包含将在babel-loader路径中创建该问题的特定库来强制他们的babelization来解决这个问题。但是在这种特殊情况下，unbabelized代码似乎来自一个不在我的package.json中的库，这意味着它必须嵌套在另一个库中。

如何追踪嵌套库来自哪个库？

或者是否有更简单的解决方案来确保我的整个模块不会保留为ES6格式？

以下是我的webpack.config.js文件：

var webpack = require('webpack');
var path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

var BUILD_DIR = path.resolve(__dirname, 'static/public/js');
var APP_DIR = path.resolve(__dirname, 'static/js');
var CSS_DIR = path.resolve(APP_DIR, 'css');

var config_function = function(env){
var config = {
entry: ['babel-polyfill', APP_DIR + '/index.js'],
output: {
  path: BUILD_DIR,
  filename: env && env.prod ? 'bundle.min.js' : 'bundle.js'
},
plugins: env && env.prod ? [
  new UglifyJSPlugin({uglifyOptions:{
        ecma: 5,
        mangle: {
            safari10: true
        },
        compress: true
      }})
]: [],
module: {
  loaders: [{
    test: /\.jsx?/,
    include: [APP_DIR, /node_modules\/snakecase-keys/, /node_modules\/redux-api-middleware/,/node_modules\/map-obj/], // Those are some of the libraries that are not babelized...
    loader: 'babel-loader',
    query: {
      presets: ['es2015', 'react', 'stage-2'] //, 'react-hmre']
    }
  }
  , {
    test: /\.scss$/,
    loaders: ['style-loader', 'css-loader', 'sass-loader']
  }, {
    test: /\.json$/,
    loader: 'json-loader'
  }, {
    test: /\.less$/,
    include: CSS_DIR,
    loaders: ['style-loader', 'css-loader', 'less-loader']
  },
    {
      test: /\.css$/,
      loaders: ['style-loader', 'css-loader']
    }
  ]
}
  };

  return config;
}

module.exports = config_function;

Webpack不会使用ES6对某些node_modules进行babelize

0 个答案: