使用babel-preset-env的Babel似乎忽略了浏览器列表配置

时间:2019-03-05 09:54:12

标签: cross-browser babeljs package.json npm-scripts babel-preset-env

我正在使用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"

不幸的是,这似乎没有任何作用。

所以,我的问题是:

  1. 为什么browserslist键似乎不影响Babel?我的语法有问题吗?

  2. 在package.json中的哪里显示browserslist键是否重要?即按键顺序重要吗?

2 个答案:

答案 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中的缓存