带有 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”时出现问题

矩阵中的火花循环以运行线性回归

a bab式的词语都有哪些

电脑显示removable storage device bab or missing是啥意思

编译原理文法设计—每个a后面至少一个bab个数相等,ab个数不相等的所有串

BAB领疯了,但很多人还不知道NFT之后这两大新Token形式,号称能改变世界?