我司有个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 atcaniuse-lite/data/regions
.> 5% in my stats
: uses custom usage data.> 5% in browserslist-config-mycompany stats
: uses custom usage data frombrowserslist-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
orlast 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 isIE 10
,IE_Mob 11
,BlackBerry 10
,BlackBerry 7
,Samsung 4
andOperaMobile 12.1
.- Node.js versions:
node 10
andnode 10.4
: selects latest Node.js10.x.x
or10.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
andPhantomJS 1.9
: selects Safari versions similar to PhantomJS runtime.extends browserslist-config-mycompany
: take queries frombrowserslist-config-mycompany
npm package.supports es6-module
: browsers with support for specific features.es6-module
here is thefeat
parameter at the URL of the Can I Use page. A list of all available features can be found atcaniuse-lite/data/features
.browserslist config
: the browsers defined in Browserslist config. Useful in Differential Serving to modify user’s config likebrowserslist config and supports es6-module
.since 2015
orlast 2 years
: all versions released since year 2015 (alsosince 2015-03
andsince 2015-03-10
).unreleased versions
orunreleased 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%之间。