javascript - 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;
解决方案
推荐阅读
- javascript - 在对象数组中使用条件将特定字符串添加到对象数据
- linux - curl命令设置权限和下载文件
- blockly - 我们如何以块状创建树视图工具箱,如图像中的任何示例代码或需要文档指南
- blazor - Blazor 服务器中的侧边栏
- python - 我改变了速度以制作破折号,但想在这里添加一些破折号长度限制
- python - RASA - 聊天机器人 - 规格详情
- apache-poi - 如何使用 Apache XSSF 格式在 xlsx 的条件格式规则中启用“如果为真则停止”选项
- oracle - 仅当远程表可访问或oracle中有完整数据时才截断本地表
- python - 给定一个单词列表,为每个单词找到最短的唯一前缀
- flutter - 在底部导航栏颤动中删除底部阴影效果