我正在使用npm脚本中的browserslist测试Babel。
这是我当前的package.json,Babel正在按照我的期望进行操作:
{
"name": "npm-scripts-igloo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"devserver": "live-server",
"watch-sass": "node-sass sass/style.scss css/style.css --output-style expanded --watch",
"compile-sass": "node-sass sass/style.scss css/style.compiled.css --output-style expanded",
"prefix-css": "postcss css/style.compiled.css --use autoprefixer -o css/style.prefix.css",
"compress-css": "node-sass css/style.prefix.css css/style.min.css --output-style compressed",
"build-css": "npm-run-all compile-sass prefix-css compress-css",
"babel": "babel app.js --watch -o js/app.compiled.js",
"start": "npm-run-all -p devserver watch-sass babel"
},
"browserslist": [
"last 5 versions"
],
"babel": {
"presets": [
[
"env",
{
"targets": {
"browsers": [
"cover 99.5%"
]
}
}
]
]
},
"author": "",
"license": "ISC",
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.6.1",
"autoprefixer": "^9.4.7",
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"live-server": "^1.2.1",
"node-sass": "^4.11.0",
"npm-run-all": "^4.1.5",
"postcss-cli": "^6.1.1"
}
}
我没有使用.babelrc文件或Babel的任何其他配置。
我尝试使用浏览器列表键定位Edge 16:
"browserslist": [
"Edge 16"
]
使用此配置,Babel不应将const
转换为var
,但可以这样做,如此处所述:
Babel不会更改const,因为Edge 16支持它
https://github.com/browserslist/browserslist-example
但是,如果我使用babel键定位Edge 16:
"babel": {
"presets": [
[
"env",
{
"targets": {
"browsers": [
"Edge 16"
]
}
}
]
]
}
然后,由于Edge 16支持,Babel不会正确地将const
更改为var
。
我宁愿使用browserslist键,因为这是推荐做法 https://github.com/browserslist/browserslist
此外,我还可以与autoprefixer共享此browserslist选项,这就是它应该起作用的方式。
但是,问题在于Babel似乎忽略了浏览器列表键。
如果我使用包含以下内容的.browserslistrc文件,则同样如此:
Edge 16
此幻灯片上带有星号的注释: https://slides.com/ai/browserslist#/14 报告: 仅Babel 7支持配置文件
因此,我尝试将Babel更新到v7:
npm install @babel/core -D
这在devDependencies中产生了以下内容:
"@babel/core": "^7.3.4"
不幸的是,这似乎没有任何作用。
所以,我的问题是:
为什么browserslist键似乎不影响Babel?我的语法有问题吗?
在package.json中的哪里显示browserslist键是否重要?即按键顺序重要吗?
答案 0 :(得分:1)
它与babel@7.6.0配合使用,并在.babelrc fie中进行以下配置
'@babel/preset-env', {
'useBuiltIns': 'usage',
'corejs': 3,
'targets': {
'browsers': ['chrome 74']
}
}
找到了更多信息here。
或组合器可以使用关键字或以及。最后1个版本或> 1%等于最后1个版本> 1%。
还支持和查询组合以执行上一个查询的交集:前1个版本和> 1%。
答案 1 :(得分:0)
尝试清除node_modules/.cache/babel-loader
中的缓存