Babel с babel-preset-env, похоже, игнорирует конфигурацию списка браузеров - PullRequest
Новая
       78

Babel с babel-preset-env, похоже, игнорирует конфигурацию списка браузеров

0 голосов
/ 05 марта 2019

Я тестирую Babel со списком браузеров в сценарии npm.

Вот мой текущий 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: 

"browserslist": [
    "Edge 16"
  ]

В этой конфигурации Babel НЕ должен конвертировать const до var, но это так, как объяснено здесь: Babel не меняет const, поскольку Edge 16 поддерживает его https://github.com/browserslist/browserslist-example

Однако, если я нацеливаюсь на Edge 16 с помощьюключ babel: 

"babel": {
    "presets": [
      [
        "env",
        {
          "targets": {
            "browsers": [
              "Edge 16"
            ]
          }
        }
      ]
    ]
  }

, тогда Babel правильно не изменит const на var, так как Edge 16. его поддерживает.

Я бы предпочел использовать ключ browserlist, так как эторекомендуемая практика https://github.com/browserslist/browserslist

Кроме того, я мог бы затем просто поделиться этой опцией списка браузеров с autoprefixer, как это должно работать.

Но проблема в том, что Babel, похоже, игнорирует список браузеров.ключ.

То же самое верно, если я использую .browserФайл slistrc, содержащий: 

Edge 16

На этом слайде отмечена звездочка: https://slides.com/ai/browserslist#/14, сообщающая: Только Babel 7 поддерживает файл конфигурации

ИтакЯ попытался обновить Babel до v7: 

npm install @babel/core -D

Это привело к следующему в devDependencies: 

"@babel/core": "^7.3.4"

К сожалению, это, похоже, не имело никакого значения.

Итак, мои вопросы:

  1. Почему ключ списка обозревателей не влияет на Babel?Что-то не так с моим синтаксисом?

  2. Имеет ли значение, где в файле package.json появляется ключ браузера?т.е. имеет значение ключевой порядок?

...