Javascript Can';t让babel loader为String.prototype.trimleet()添加polyfill(又名trimStart)
我将我的javascript与webpack/babel loader捆绑在一起(使用@babel/preset env“useBuiltIns:'usage'”设置),并且在编译过程中不会添加String.prototype.trimStart()polyfill。我试着使用它的另一个名字“trimleet(),”但仍然没有成功。这是一个错误还是我做错了什么 我在Mac上使用Node,我将@babel/polyfill作为项目依赖项,将@babel/core、@babel/preset env和babel loader作为开发依赖项(以及网页包)。我的babel配置在我的webpack.config.js文件中 我在调试模式下运行babel loader,所以我可以看到哪些多边形填充被添加到哪些模块中;据我所知,只有trimLeft/trimStart是个问题。因此,在IE中运行我的应用程序会抛出一个错误 从package.json:Javascript Can';t让babel loader为String.prototype.trimleet()添加polyfill(又名trimStart),javascript,node.js,webpack,babel-loader,babel-polyfill,Javascript,Node.js,Webpack,Babel Loader,Babel Polyfill,我将我的javascript与webpack/babel loader捆绑在一起(使用@babel/preset env“useBuiltIns:'usage'”设置),并且在编译过程中不会添加String.prototype.trimStart()polyfill。我试着使用它的另一个名字“trimleet(),”但仍然没有成功。这是一个错误还是我做错了什么 我在Mac上使用Node,我将@babel/polyfill作为项目依赖项,将@babel/core、@babel/preset env
"dependencies": {
"@babel/polyfill": "^7.2.5"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.3.1",
"babel-loader": "^8.0.5",
"webpack": "^4.29.1",
"webpack-cli": "^3.2.1"
}
从webpack.config.js(在module.exports.module.rules中):
从我使用String.prototype.trimLeft()的模块(在默认的导出箭头函数中):
在支持trimLeft()/trimStart()的浏览器中,此代码工作正常。我要补充的是,当我尝试将babel设置更改为针对不支持trim()的浏览器时,trim()polyfill在编译期间被导入此模块。听起来像polyfill只嗅探缺少的“.trim”。您只需对导致问题的任何缺少的方法进行别名;“这不应该和捆绑机有任何关系。”丹达维斯感谢您的回复。我是个书呆子,不太明白你所说的“别名——不管缺少什么方法都会导致问题”是什么意思。另外,在node_模块中窥探核心js文件夹后,我可以确认在各种es7和string文件夹中似乎有trimleeft/trimStart和trimlright/trimEnd“stuff”。所以看起来这里应该有支持。类似于
if(!“”.trimStart&&“.trimleet)String.prototype.trimStart=”“.trimleet
以将缺少的代码与present@dandavis需要明确的是,问题在于浏览器既不支持trimStart()也不支持trimLeft()(如IE 10)。我在我的代码中尝试了这两种方法——无论我使用哪种方法,都不会添加polyfill。
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
useBuiltIns: 'usage',
debug: true,
targets: {
browsers: ['IE >= 10']
}
}]
]
}
}
const messageInput = document.querySelector('#message-input');
const usernameInput = document.querySelector('#username-input');
messageInput.addEventListener('keydown', handleKeydown);
usernameInput.addEventListener('keydown', handleKeydown);
function handleKeydown(event) {
if (event.key === 'enter') {
const username = usernameInput.value.trim();
const text = messageInput.value.trimLeft();
// etc.
}
}