• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

记一次编译失败与browerlist实践

开发技术 开发技术 3小时前 2次浏览

我司有个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:-

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%之间。


程序员灯塔
转载请注明原文链接:记一次编译失败与browerlist实践
喜欢 (0)