• 记一次编译失败与browerlist实践


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

    它是一个被广泛使用的工具,通过配置需要的用户浏览器版本,安装相应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%之间。

  • 相关阅读:
    JAVA设计模式之单例模式
    JAVA设计模式之单例模式
    数据库连接池
    数据库连接池
    DbUtils操作数据库
    DbUtils操作数据库
    Hadoop 问题之 Linux服务器jps报process information unavailable
    echarts ——纵坐标赋值
    echarts ——div没有设置样式图表就展示不出来!
    Elasticsearch+spring boot(一)
  • 原文地址:https://www.cnblogs.com/foxcharon/p/15265107.html
Copyright © 2020-2023  润新知