[轉] babel入門基礎
阿新 • • 發佈：2018-08-04
orm 需要 target ssi all promise npm babel strong
.babelrc文件中的設置：
背景
babel的官網說babel是下一代的js語法編譯器，現在自己也在很多項目中使用了babel，可是自己對babel的認識呢，只停留在從google和別人項目中copy的配置代碼上，內心感到很不安，最近花了點時間整理了一下，分享給大夥。
babel常用配置
通常在前端或node項目中，進行以下配置：
入口文件app.babel.js裏面配置：| 1 2 3 4 5 6 7 |
// babel
require(‘babel-core/register‘)({
presets: [‘es2015‘, ‘stage-0‘]});
require(‘babel-polyfill‘);
require(‘./app.js‘);
|
| 1 2 3 |
{
"presets": ["es2015", "stage-0"]
}
|
babel基礎概念
1.babel-core
新的js語法之前是不存在的，需要將js代碼分析抽象的語法樹 ，方便各個插件分析語法進行相應的處理成低版本的js；2.babel-register
改寫了require命令，會對.js、jsx、.es、es6 後綴的模塊都會先轉碼，但並不會對當前文件進行轉碼；由於該轉碼是實時的，所以不能用在生產環境中。3.babelrc文件
目前babel提供了幾個官方的preset，主要包括：env es2015 es2016 es2017 flow latest react 。設置presets的時候需要提前npm安裝相應的插件，插件名格式：babel-preset-xxx；如下：
| 1 2 3 |
{ "presets": ["es2015"] }
npm install babel-preset-es2015
|
如果不需要一套plugins的預設置，可以通過plugins屬性引入所需的plugin，比如以下的設置就會引入編譯class函數的功能。
| 1 |
{ "plugins": ["transform-es2015-classes"] }
|
需要註意的是，某些插件是不被presets預置的，如常用的transform-runtime插件和transform-remove-console插件。 關於presets和plugins的優先順序一般遵從3個原則：
- plugins優先於presets進行編譯。
- plugins按照數組的index增序(從數組第一個到最後一個)進行編譯。
- presets按照數組的index倒序(從數組最後一個到第一個)進行編譯。
- 詳細信息可以查看官方文檔
4.babel-polyfill
polyfill擁有自定義的regenerator runtime 和core-js；它模擬了ES2015的環境，一般使用在應用程序中，而不是當做庫和工具使用；比如說babel-node中自帶了babel-polyfill，babel-polyfill為node提供了ES6的REPL環境。REPL，即read-eval-print-loop交互式解釋器。詳情可參考阮老師的文章。 babel幾乎能翻譯所有的js新語法，但是對於APIs卻並非如此，如新增對象Promise、Set、Map等，靜態方法Object.assign等，這就需要創造一個ES6的運行環境。 可以通過babel-polyfill來轉碼新API，其實現辦法就是向全局變量上掛新增的對象或在原型鏈上增加方法，如在node環境下將Promise掛在global對象上。缺點就是汙染全局變量。 還有一個避免全局汙染的方法就是使用babel-runtime + babel-plugins-runtime-transform；babel-runtime 更像是分散的polyfill 模塊，我們可以在自己的模塊裏單獨引入，比如 require(‘babel-runtime/core-js/promise’) ，它們不會在全局環境添加未實現的方法，只是這樣手動引用每個 polyfill 會非常麻煩。我們借助 Runtime transform 插件來自動化處理這一切。webpack中如何使用babel
1.使用babel-runtime
需要安裝babel-runtime和babel-plugin-transform-runtime| 1 2 3 4 5 6 7 8 9 10 |
module: {
loaders: [{
loader: ‘babel‘,
test: /\.js/,
include: path.join(__dirname, ‘src‘),
query: {
plugins: [‘transform-runtime‘],
presets: [ ‘es2015‘, ‘stage-0‘],
}}]
}
|
2.使用babel-polyfi
將babel-polyfill放在入口設置處| 1 2 3 4 5 6 7 8 9 10 11 |
entry: [ ‘babel-polyfill‘,‘src/index.js‘, ],
module: {
loaders: [{
loader: ‘babel‘,
test: /\.js/,
include: path.join(__dirname, ‘src‘),
query: {
presets: [‘es2015‘, ‘stage-0‘]
}}]
}
|
參考資料： http://www.tuicool.com/articles/vmA3U3R https://segmentfault.com/a/1190000008159877 https://github.com/brunoyang/blog/issues/20
[轉] babel入門基礎