初學使用Babel

Babel

記住官網鏈接babeljs.io

Docs

General

Presets

env

options
useBuiltIns

看stackoverflow上關於對這個usage和entry用法的解釋,使用usage的話,自己不需要添加import

"usage" | "entry" | false, defaults to false
This options configures how @babel/preset-env handles polyfills

when either the usage or entry options are used, @babel/preset-env will add direct reference to core-js modules as bare imports (or requires). This means core-js will be resolved relative to the file itself and needs to be accessible.

since @babel/polyfill was deprecated in 7.4.0, we recommend directly adding core-js and setting the version via the corejs option.

usageentry被使用的時候,@babel/preset-env會添加直接的引用給core-js模塊作爲赤裸裸的imports或是requires。就是說core-js會相對於這個文件自身而被解析,並且需要能被訪問。

直接添加core-js並且通過corejs選項設置版本

注意,webpack中的這個選項

options: {
	presets: ["@babel/preset/env"]
}    

和.babelrc文件有衝突。 如果兩個都使用了的話,通過我的測試,.babelrc裏的很多選項都是想了,比如useBuiltIns, 可以通過修改名字來判斷,即沒有報錯說明根本沒用到這個選項。

此外,直接這在webpack裏這樣設置的話,並且沒有使用Import的話,那麼babel基本上沒用上core-js。

那到底在webpack的babel-loader中怎麼配置這個Options呢,這個就要看babel的教程了,就在Docs - Usage - Options裏面。比如裏面就提到哪些選項可以被用在babel的整合用戶中,就像babel-loader這樣的用戶。能用的經測試,babelrc配置boolean,可以決定webpack是不是用.babelrc,經測試如果false那麼基本上core-js沒用上了。

useBuiltIns: 'entry'

This option enables a new plugin that replaces the import “core-js/stable”; and import “regenerator-runtime/runtime” statements (or require(“corejs”) and require(“regenerator-runtime/runtime”)) with individual requires to different core-js entry points based on environment.

這個選項會開啓一個新的插件,這個插件會使用,獨立的requires不同的基於環境的入口點,來代替上面提到的這些import或require。

Importing "core-js" loads polyfills for every possible ECMAScript feature: what if you know that you only need some of them? When using core-js@3, @babel/preset-env is able to optimize every single core-jsentrypoint and their combinations. For example, you might want to only polyfill array methods and new Math proposals:

導入core-js爲每一個可能的ECMAScript特色加載polyfills。

這麼說我是不是可以理解爲,如果只使用import 'core-js',,那麼會加載所有的polyfills,即使某些polyfills不需要呢?

看到這裏可以去看一下core-js在github的repository

useBuiltIns: 'usage'

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章