记一次编译失败与browerlist实践

Posted 2021-09-13 亦虚

我司有个React项目用到了leaflet，然后我需要在电脑上跑这个项目。

装好依赖，结果启动时编译失败了。

和这个帖子（https://github.com/PaulLeCam/react-leaflet/issues/900）的错误一样。

./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

看着像一个兼容性问题。“??” 这个写法本身没有问题，但是太新了，是ES2020新加的特性。

这个帖子指路指到了另外一个网站（https://stackoverflow.com/questions/67552020/how-to-fix-error-failed-to-compile-node-modules-react-leaflet-core-esm-pat/67574280#67574280）。

I found a way to fix it.

Steps to fix:-

Open your package.json file and edit your browserslist as follows.

 "browserslist": {
   "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
},

to

"browserslist": [
   ">0.2%",
  "not dead",
  "not op_mini all"
],

Once you\'ve done this, Delete node_modeules/.cache directory.

Then try npm install

and npm start

Tadaaa!

References:-

• https://github.com/facebook/create-react-app/issues/9468#issuecomment-694191642
• https://github.com/PaulLeCam/react-leaflet/issues/877

browserslist，没见过的属性。

于是我在github上找到了（https://github.com/browserslist/browserslist）。

Browserslist

The config to share target browsers and Node.js versions between different front-end tools. It is used in:

• Autoprefixer
• Babel
• postcss-preset-env
• eslint-plugin-compat
• stylelint-no-unsupported-browser-features
• postcss-normalize
• obsolete-webpack-plugin

它是一个被广泛使用的工具，通过配置需要的用户浏览器版本，安装相应polyfill，解决浏览器兼容性问题。

有趣的是，它的设定是直接配置需要的浏览器版本，而不是人为定义一些stage或者level。

使用很简单，直接在package.json配置“browserslist”属性即可。

Full List

You can specify the browser and Node.js versions by queries (case insensitive):

• defaults: Browserslist’s default browsers (> 0.5%, last 2 versions, Firefox ESR, not dead).
• By usage statistics:
  • > 5%: browsers versions selected by global usage statistics. >=, < and <= work too.
  • > 5% in US: uses USA usage statistics. It accepts two-letter country code.
  • > 5% in alt-AS: uses Asia region usage statistics. List of all region codes can be found at caniuse-lite/data/regions.
  • > 5% in my stats: uses custom usage data.
  • > 5% in browserslist-config-mycompany stats: uses custom usage data from browserslist-config-mycompany/browserslist-stats.json.
  • cover 99.5%: most popular browsers that provide coverage.
  • cover 99.5% in US: same as above, with two-letter country code.
  • cover 99.5% in my stats: uses custom usage data.
• Last versions:
  • last 2 versions: the last 2 versions for each browser.
  • last 2 Chrome versions: the last 2 versions of Chrome browser.
  • last 2 major versions or last 2 ios major versions: all minor/patch releases of last 2 major versions.
• dead: browsers without official support or updates for 24 months. Right now it is IE 10, IE_Mob 11, BlackBerry 10, BlackBerry 7, Samsung 4 and OperaMobile 12.1.
• Node.js versions:
  • node 10 and node 10.4: selects latest Node.js 10.x.x or 10.4.x release.
  • current node: Node.js version used by Browserslist right now.
  • maintained node versions: all Node.js versions, which are still maintained by Node.js Foundation.
• Browsers versions:
  • iOS 7: the iOS browser version 7 directly.
  • Firefox > 20: versions of Firefox newer than 20. >=, < and <= work too. It also works with Node.js.
  • ie 6-8: selects an inclusive range of versions.
  • Firefox ESR: the latest Firefox Extended Support Release.
  • PhantomJS 2.1 and PhantomJS 1.9: selects Safari versions similar to PhantomJS runtime.
• extends browserslist-config-mycompany: take queries from browserslist-config-mycompany npm package.
• supports es6-module: browsers with support for specific features. es6-module here is the feat parameter at the URL of the Can I Use page. A list of all available features can be found at caniuse-lite/data/features.
• browserslist config: the browsers defined in Browserslist config. Useful in Differential Serving to modify user’s config like browserslist config and supports es6-module.
• since 2015 or last 2 years: all versions released since year 2015 (also since 2015-03 and since 2015-03-10).
• unreleased versions or unreleased Chrome versions: alpha and beta versions.
• not ie <= 8: exclude IE 8 and lower from previous queries.

You can add not to any query.

说到兼容，我们想到的总是旧浏览器的支持，没有想过过于新的特性会无法编译通过。

而这个项目原先设定的浏览器支持百分比是">1%"，我按照答案修改browserslist，删除依赖后重新安装，再次运行项目，这次就编译通过了。

这说明“??”的使用率在0.2%到1%之间。