首页 > 解决方案 > Webpack 不会使用 ES6 对一些 node_modules 进行 babelize

问题描述

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

到目前为止,我会通过在 babel-loader 路径中包含会创建该问题的特定库来解决此问题,以强制它们进行 babel 化。然而,在这种特殊情况下,未经处理的代码似乎来自一个不在我的 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;

标签: javascriptwebpackecmascript-6babeljs

解决方案


推荐阅读