**问题:**我想为旧浏览器(>= IE10)的网站构建捆绑文件。
当我使用babel-loader
用babel 7.x
转译代码时,我的转译代码在旧的Internet Explorer 11上抛出错误,因为默认情况下node_modules
模块似乎不会再转译了?
**问题:**如果我的node_module
模块还没有被软件包作者编译,我如何确保它们都能被编译?
使用babel-loader的webpack.js.js
// webpack.config.js
rules: [
{
test: /\.(js|jsx)$/,
use: [
{
loader: 'babel-loader',
},
],
exclude: [],
},
],
字符串
使用babel 7.x配置babelrc.js
// .babelrc.js
module.exports = function(api) {
const presets = [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
ignoreBrowserslistConfig: true,
targets: {
node: 8,
browsers: [
'last 3 versions',
'> 1% in DE',
'Explorer >= 10',
],
},
},
],
'@babel/preset-react',
];
const plugins = [
// ...
];
return {
presets,
plugins,
};
};
型
更新一:
这是一个babel的问题。我的babel配置名为.babel.rc
,babel 7的默认设置是查找一个名为babel.config.js
的配置文件,见这里。
因此,在将babel配置文件从“.babel.rc”重命名为“babel.config. js”之后,我可以应用这里描述的“webpack.config.js”中的解决方案来转换未转换的“node_modules”软件包:
// webpack.config.js
rules: [
{
test: /\.(js|jsx)$/,
use: [
{
loader: 'babel-loader',
},
],
// Exclude the untransformed packages from the exclude rule here
exclude: /node_modules\/(?!(MY_MODULE|ANOTHER-ONE)\/).*/,
},
],
型
**问题:**这感觉像是一种变通方法,但是否有更方便的方法来处理此类问题?我只是假设在不久的将来会有越来越多的未转换的软件包(在此讨论之后),我们是否总是必须手动将软件包名称放入webpacks的exclude
规则中?
2条答案
按热度按时间kokeuurv1#
问:这感觉像是一种变通方法,但是有没有更方便的方法来处理这样的问题呢?我只是假设在不久的将来会有越来越多的未转换的软件包在外面(在这个讨论之后),我们总是必须手动将软件包名称放在webpack的排除规则中吗??
您可以使用像
are-you-es5
这样的模块来自动创建例外列表或测试:https://www.npmjs.com/package/are-you-es5此外,如果指向您的
node_modules
,则eslint-plugin-compat
之类的东西可能会警告您存在问题:https://www.npmjs.com/package/eslint-plugin-compat我认为在生产环境中,一般来说,你应该在添加软件包之前先了解它们,或者如果IE11对你的项目很重要的话,做一些自动化测试来捕捉浏览器错误。
我知道这并不总是可能的,但我强烈建议将IE11及以下版本的支持推到一些较低的级别。在使用现代JS的同时仍然维护IE11及以下版本是非常困难的。
kadbb4592#
我知道这是一个老问题,但最近我花了相当长的时间来解决同样的问题,所以我也想分享我的经验。
首先,
exclude: /node_modules\/(?!(MY_MODULE|ANOTHER-ONE)\/).*/
只适用于 *nix,而不适用于window,因为window使用/
作为路径,所以使用正则表达式的通用解决方案是exclude: /node_modules(?!(\/|\\)MY_MODULE|ANOTHER-ONE)/
第二,使用负的lookahead正则表达式确实会让人感到尴尬,https://github.com/babel/babel-loader#some-files-in-my-node_modules-are-not-transpiled-for-ie-11有一个更好的方法。
字符串