带有 babel-preset-env 的 Babel 似乎忽略了 browserslist 配置
Posted
技术标签:
【中文标题】带有 babel-preset-env 的 Babel 似乎忽略了 browserslist 配置【英文标题】:Babel with babel-preset-env seems to ignore browserslist config 【发布时间】:2019-07-26 18:03:29 【问题描述】:我正在一个 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 配置。
我尝试使用 browserslist 键定位 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"
]
]
]
那么 Babel 不会正确地将 const
更改为 var
,因为 Edge 16 支持它。
我更喜欢使用 browserslist 键,因为这是推荐的做法 https://github.com/browserslist/browserslist
另外,我可以简单地与自动前缀共享这个 browserslist 选项,这就是它的工作方式。
但是,问题是 Babel 似乎忽略了 browserslist 键。
如果我使用包含以下内容的 .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?我的语法有问题吗?
browserslist 键出现在 package.json 中的哪个位置是否重要?即关键顺序重要吗?
【问题讨论】:
【参考方案1】:尝试清理node_modules/.cache/babel-loader
中的缓存
【讨论】:
【参考方案2】:babel@7.6.0 对我有用,在 .babelrc fie 中有以下配置
'@babel/preset-env',
'useBuiltIns': 'usage',
'corejs': 3,
'targets':
'browsers': ['chrome 74']
找到更多信息here。
or 组合器可以使用关键字 or 以及 ,。 last 1 version or > 1% 等于 last 1 version, > 1%。
还支持查询组合执行上一个查询的交集:last 1 version and > 1%。
【讨论】:
以上是关于带有 babel-preset-env 的 Babel 似乎忽略了 browserslist 配置的主要内容,如果未能解决你的问题,请参考以下文章
在 React 和 Webpack 项目上从“babel-preset-es2015”过渡到“babel-preset-env”时出现问题
电脑显示removable storage device bab or missing是啥意思