babel從入門到入門

博客講解內容如下：

　　1、babel是什么

　　2、javascript制作規范

　　3、babel轉譯器

　　4、babel的使用

　　5、常見的幾種babel轉譯器和插件

　　6、babel最常見配置選項

　　7、babel的其他

　　8、在webpack中使用babel

　　9、總結

凡是看到這個標題點進來的同學，相信對babel都有了一定的了解。babel使用起來很簡單，簡單到都沒有必要寫一篇文章去介紹，直接看看官方文檔就可以。所以我也在懷疑到底該不該寫這篇文章。想來想去還是決定動手寫寫，原因是很簡單，自己在剛開始接觸babel也出現過懵逼的狀態，所以希望這篇文檔能給其他人以幫助。

1、babel是什么

babel官網正中間一行黃色大字寫着“babel is a javascript compiler”，翻譯一下就是babel是一個javascript轉譯器。為什么會有babel存在呢？原因是javascript在不斷的發展，但是瀏覽器的發展速度跟不上。以es6為例，es6中為javascript增加了箭頭函數、塊級作用域等新的語法和Symbol、Promise等新的數據類型，但是這些語法和數據類型並不能夠馬上被現在的瀏覽器全部支持，為了能在現有的瀏覽器上使用js新的語法和新的數據類型，就需要使用一個轉譯器，將javascript中新增的特性轉為現代瀏覽器能理解的形式。babel就是做這個方面的轉化工作。

2、javascript制作規范

在這里有必要簡單講一下javascript版本，我只是大體講下，javascript是網景公司開發的一種腳本語言，1996年的時候以ECMAScript的名字正式成為一種標准。2007年的時候發布了版本es5，然后在隨后近10年里js並沒有大的變化。所以現在的瀏覽器都可以很好的支持es5。這一局面直到2015年被打破。2015年6月，TC39（javascript標准的制定組織）公布了新版本的js語言——ES6。而且從ES6開始，TC39規定每年都要發布一個js的新版本，新版本將包含年號，都是以ESxxxx的方式進行命名。所以2015年發布的ES6又叫ES2015，2016年發布的新的js版本就叫ES2016，2017年發布的新的js版本就叫ES2017……。

因為版本都是向前兼容的，就是老版本js版本中規定的語法和api在新版本的js中同樣也會合理的。所以我們可以想到后面的規范肯定是包含前面的規范的，也就是ES2016版本的js規范是包含ES2015(ES6)規范的，ES2017是包含ES2016的也包含ES2015的。針對不同的規范，Babel也提供了對應的轉換器。

• babel-preset-es2015 將es2015版本的js轉譯為es5。

• babel-preset-es2016 將es2016版本的js轉譯為es5。

• babel-preset-es2017 將es2017版本的js轉譯為es5。

在轉譯過程中遇到更高版本的js語法，babel是會直接忽略的。

在這里在簡單講一下js新規范的制作過程。

js規范的制作分4個階段。

• Stage0 ：任何尚未提交為正式提案的討論，想法，改變或對已有規范的補充建議都被認為是一個稻草人草案（“strawman” proposal），但只有TC39成員可以提出此階段的草案。

• Stage1 ：此階段，稻草人草案升級為正式化的提案，並將逐步解決多部門關切的問題，如與其他提案的相互之間會有什么影響，這一草案具體該如何實施等問題。人們需要對這些問題提供具體的解決方案。stage1的提案通常還需要包括API描述，擁有說明性使用示例，並對語義和算法進行討論，一般來說草案在這一階段會經歷巨大的變化。

• Stage2 ：此階段，草案就有了初始的規范。通過polyfill（打補丁。編寫一些代碼實現瀏覽器之前不支持的功能），開發者可以開始使用這一階段的草案了，一些瀏覽器引擎也會逐步對這一階段的規范的提供原生支持，此外通過使用構建工具（類似babel的工具）也可以編譯源代碼為現有引擎可以執行的代碼，這些方法都使得這一階段的草案可以開始被使用了。

• State3 ：此階段的規范就屬於候選推薦規范了，這一階段之后變化就不會那么大了，要達到這一階段需要滿足以下條件：

  • 規范的編輯和指定的審閱者必須在最終規范上簽字；

  • 用戶也應該對該提議感興趣；

  • 提案必須至少被一個瀏覽器原生支持；

  • 擁有高效的ployfill，或者被Babel支持；

• Stage4 ：此階段的提案必須有兩個獨立的通過驗收測試的實現，進入第4階段的提案將包含在 ECMAScript 的下一個修訂版中。

針對js規范的不同階段，babel也提供了對應的轉譯器

• Stage0：preset-stage-0

• Stage1：preset-stage-1

• Stage2：preset-stage-2

• Stage3：preset-stage-3

不同階段的轉譯器之間是包含的關系，preset-stage-0轉譯器除了包含了preset-stage-1的所有功能還增加了transform-do-expressions插件和transform-function-bind插件，同樣preset-stage-1轉譯器除了包含preset-stage-2的全部功能外還增加了一些額外的功能……。

好了，javascript的制作規范大體講完了，現在我們來講下babel轉譯器。

3、babel轉譯器

為了便於說明，首先我們來定義兩個概念。

1. 轉譯插件，轉譯插件是用來轉譯單一功能的插件，比如transform-es2015-arrow-functions，這個插件只負責轉譯es2015新增的箭頭函數。

2. 轉譯器，轉譯器是一系列轉譯插件的集合。比如babel-preset-es2015就包含了es2015新增語法的所有轉譯插件，比如包含transform-es2015-arrow-functions（es2015箭頭函數轉譯插件）、transform-es2015-classes(es2015 class類轉譯插件)等。

js規范新增的每個語法都有對應的babel插件，因此babel插件眾多。為了便於管理，會把某些插件集合在一起，構成一個轉譯器。要不然如果我們想轉譯es2015的語法就要安裝一大堆插件了，有了轉譯器之后我們只需要安裝一個轉譯器就可以了。babel的轉譯器根據用途的不同也分了不同給的類，這些類非常多，所以babel看起來很混亂。不過大體上babel的轉譯器分為3類。

1. 語法轉譯器，這些轉譯器只負責轉譯js最新的語法，並不負責轉譯js新增的api和全局對象。這類轉譯器包括babel-preset-env、babel-preset-es2015、babel-preset-es2016、babel-preset-es2017、babel-preset-latest等，以后肯定還會有新的轉譯器加入，不過你只要理解轉譯器就是一堆轉譯插件的集合就可以了。

2. 補丁轉譯器，這些轉譯器只負責轉譯js最新的api和全局對象。比如瀏覽器不支持String新增的String.padStart方法和Promise全局對象。通過babel-profill轉譯，我們可以通過其他代碼來讓瀏覽器實現類似String.padStart和Promise的功能。

3. jsx和flow插件，這類轉譯器用來轉譯JSX語法和移除類型聲明的，使用Rect的時候你將用到它，轉譯器名稱為babel-preset-react

另外你可以對babel已有的轉譯器進行改造或者創建新的轉譯器。如何創建babel轉譯器可以點這里。

4、babel的使用

babel支持的使用場景非常多，可以在瀏覽器中使用（browser）也可以在命令行（cli），還可以是我們常見的gulp和webpack中。

以下以安裝babel-cli為例進行說明。babel更多的使用方法請點擊這里。

4.1、創建bebel項目

在本地磁盤上創建一個文件夾es6（名字任意），在該文件夾下打開命令行工具，初始化項目。

1	D:\webpack\demo\es6>npm init -y

這個命令目的就是創建一個默認的package.json文件。

4.2、本地安裝babel命令行工具

安裝babel的命令行工具的目的是為了在命令行使用babel。 

babel命令行工具可以全局安裝也可以本地安裝，官方文檔推薦本地安裝，原因有2點；

1. 本地安裝不同的項目可以使用不同版本的babel，你也可以單獨對某個項目的babel進行升級等操作

2. 每個項目單獨安裝的意味着對計算機環境沒有依賴，便於移植

在命令行中繼續執行如下命令

1	npm  install  --save-dev babel-cli

如果你已經全局安裝了babel，可以使用如下的命令進行卸載

1	npm uninstall --global babel-cli

這樣就已經在本地安裝好babel了。

此時我的package.json文件如下（請忽略main字段）。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

{    "name" :  "es6" ,    "version" :  "1.0.0" ,    "description" :  "" ,    "main" :  "arrow.js" ,  //請忽略main字段    "scripts" : {      "test" :  "echo \"Error: no test specified\" && exit 1"    },    "keywords" : [],    "author" :  "" ,    "license" :  "ISC" ,    "devDependencies" : {      "babel-cli" :  "^6.24.1"    } }

　　

4.3、在命令行中調用babel

本地安裝的babel是不能夠在直接命令行中運行的，為了在命令行中運行babel，我們有兩個方法，1是需要配置下package.json文件的scripts項。比如如下代碼，配置了一個build命令，運行該命令(npm run build)的時候就會在命令行執行babel src -d lib

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

{    "name" :  "es6" ,    "version" :  "1.0.0" ,    "description" :  "" ,    "main" :  "arrow.js" ,    "scripts" : {      "build" :  "babel src -d lib"    },    "keywords" : [],    "author" :  "" ,    "license" :  "ISC" ,    "devDependencies" : {      "babel-cli" :  "^6.24.1"    } }

　　

第2個方法是你需要可以進入node_modules文件夾，再進入.bin文件夾，然后執行在命令行中執行babel src -d lib。

推薦使用npm run build的方法。

這里需要解釋babel src -d lib這個命令的意思。這個命令目的是把src文件夾下的文件都轉譯，轉譯后的文件放到lib目錄下。

關於babel的命令行使用方法請點這里

ps:此時無論你是運行npm run build 還是運行babel src -d lib命令（其實兩個方法本質上都是一樣的，都是運行babel src -d lib）命令行都會報錯，原因是現在還沒有src文件夾。可以先不用管它，稍后我們再新建src文件夾。

4.4、創建.babelrc配置文件

在cmd中鍵入以下命令。

1	D:\webpack\demo\es6> type  nul>.babelrc

這個時候你的文件夾里就多了一個.babelrc文件了。windows是不能直接創建空文件名的文件的，所以必須通過命令行創建。

4.5、安裝babel的轉譯器

這里我們以babel-preset-env為例。

在命令行中執行如下代碼就會安裝babel-preset-env轉譯器。

1	D:\webpack\demo\es6>npm  install  babel-preset- env  --save-dev

注意：babel命令行工具（babel-cli）跟babel轉譯器是兩個不同的東西，命令行工具並不具有轉譯代碼的功能，只是為了在命令行中使用babel。要轉碼必須安裝轉譯器，比如babel-preset-env轉譯器或者babel-preset-react轉譯器。要轉譯的時候，還要在.babelrc文件或者命令行中配置這些轉譯器(presets)選項

4.6、配置.babelrc文件

.babelrc用於配置除回調以外的所有babel api 選項。例如plugins和presets。plugins用於配置我們轉譯所需要的插件，presets用於配置我們所需要的轉譯器。

.babelrc不是必須的，我們在.babelrc中配置的選項都可以通過命令行添加，比如在命令行執行 babel src -d lib --presets=env 等價於在.babelrc中配置 "presets":["env"]。當然.babelrc要明顯方便很多。

babel在轉譯代碼的過程中會自動讀取當前目錄.babelrc配置文件，如果當前目錄沒有的話就遍歷整個目錄樹去尋找，直到找到.babelrc文件或者含有"babel"字段的package.json文件，然后使用這些配置選項來轉譯代碼。

關於.babelrc的注意點如下。

1、如果沒有.babelrc文件，或者沒有在其他文件中設置過babel的presets的配置選型，並且命令行中也沒有配置--presets，那么代碼是不會轉譯的。原es6代碼什么樣，轉譯后的代碼還是什么樣。

2、如果你的.babelrc或者你的命令行使用了你沒有安裝的轉譯器（presets），代碼就會報錯

3、但.babelrc中的配置跟你在命令行中使用的配置沖突的時候，以.babelrc中的配置為准

1 2 3

{      "presets" :[ "env" ] }

　　

關於.babelrc文件的更多使用方法請點擊這里

4.7、.babelrc的替代方案

如果你不想生成.babelrc文件，你可以在你的package.json文件中對babel進行配置。如果你使用gulp或者webpack之類的管理工具的話，也可以在這里工具的配置選項里添加babel的配置選項。

以下以在package.json中配置為例。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

{    "name" :  "es6" ,    "version" :  "1.0.0" ,    "description" :  "" ,    "main" :  "arrow.js" ,    "scripts" : {      "build" :  "babel src -d lib --comments=true"    },    "babel" :{      //babel選項      "presets" :[ "es2015" ],      "comments" : false    },    "keywords" : [],    "author" :  "" ,    "license" :  "ISC" ,    "devDependencies" : {      "babel-cli" :  "^6.24.1" ,      "babel-loader" :  "^7.1.1" ,      "babel-preset-env" :  "^1.6.0" ,      "babel-preset-es2015" :  "^6.24.1" ,      "babel-preset-react" :  "^6.24.1" ,      "webpack" :  "^3.2.0"    } }​

　　

在package.json中配置babel等同於使用.babelrc文件

4.8、編寫es6代碼

因為我們使用的babel命令是babel src -d lib 所以我們需要在目錄中創建一個叫src的文件夾。目錄結構如下：

|-node_modules
|-src
|-.babelrc
|-package.json

在src文件夾下我們創建一個person.js文件（文件名任意），編寫如下es6代碼（代碼任意，只有是es6代碼即可，方便看出編譯后的效果）。編輯好代碼后保存。

1 2 3 4 5 6 7 8 9 10

class  Person{      constructor(){          this .name= "bigbigStrong"      }      sayName(){          console.log(`my name is ${ this .name}`);      } } var  p =  new  Person(); p.sayName();

4.9、轉譯es6代碼

在命令行工具中執行npm run build 就可以發現目錄中多了一個lib文件夾，lib文件夾下有一個person.js的文件，這個文件就是src下的person.js文件轉譯后的代碼。

1	D:\webpack\demo\es6>npm run build

轉譯后的代碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

"use strict" ; ​ var  _createClass =  function  () {  function  defineProperties(target, props) {  for  ( var  i = 0; i < props.length; i++) {  var  descriptor = props[i]; descriptor.enumerable = descriptor.enumerable ||  false ; descriptor.configurable =  true ;  if  ( "value"  in  descriptor) descriptor.writable =  true ; Object.defineProperty(target, descriptor.key, descriptor); } }  return  function  (Constructor, protoProps, staticProps) {  if  (protoProps) defineProperties(Constructor.prototype, protoProps);  if  (staticProps) defineProperties(Constructor, staticProps);  return  Constructor; }; }(); ​ function  _classCallCheck(instance, Constructor) {  if  (!(instance  instanceof  Constructor)) {  throw  new  TypeError( "Cannot call a class as a function" ); } } ​ var  Person =  function  () {      function  Person() {          _classCallCheck( this , Person); ​          this .name =  "bigbigStrong" ;      } ​      _createClass(Person, [{          key:  "sayName" ,          value:  function  sayName() {              console.log( "my name is "  +  this .name);          }      }]); ​      return  Person; }(); ​ var  p =  new  Person(); p.sayName();

　　

5、常見的幾種babel轉譯器和插件

經過上面的步驟我們已經完成了轉譯代碼的工作，現在我們介紹下babel中常用的轉譯器和配置選項

5.1、babel-preset-env

轉譯器，最常用的轉譯器。通過在.babelrc中配置env選項，可以讓代碼兼容不同版本的瀏覽器或者node。瀏覽器或者node已經支持的語法將不再轉譯了，不支持的才轉譯。如果不配置env選項，該轉譯器等同於babel-preset-latest。更多詳情和方法點這里

1 2 3 4 5 6 7 8 9

{    "presets" : [      [ "env" , {        "targets" : {          "browsers" : [ "last 2 versions" ,  "safari >= 7" ]        }      }]    ] }

5.2、babel-preset-es2015

轉譯器，將es2015版本的js代碼轉譯為es5代碼，對於es2016版本的代碼或者es2017版本的代碼不轉譯。

5.3、babel-preset-latest

轉譯器，將最新版本的js代碼轉譯為es5代碼。不推薦使用，已經廢除。建議使用babel-preset-env代替

5.4、babel-preset-react

轉譯器，剝離流類型並將JSX轉換為createElement調用，主要在轉譯react代碼的時候使用。

5.5、兼容ie瀏覽器的轉譯器

要兼容老版本的ie瀏覽器，可以使用對應的es3和es5插件

• es3-member-expression-literals

• es3-property-literals

• es5-property-mutators

5.6、總結

轉譯器就是一堆轉譯插件的集合。babel轉譯器很多，但是我們常用的就那幾個。如果要轉譯新版本的js的話，只需要使用babel-presets-env這一個轉譯器就可以了。

關於babel的更多轉譯器介紹，可以點擊這里查看。你可以點擊每一個轉譯器進去查看轉譯器的適用場景是使用方法

6、babel最常見配置選項

babel的配置選項在命令行的使用規則是babel --name-value 比如我們使用es2015轉譯器，我們的命令就是

1	babel src -d lib --presets=es2015

babel的配置選項非常多，每個轉譯器也都有自己的配置選項，關於babel的配置選項的詳細功能和使用方法，請點擊這里查看。我這里只介紹幾個常見的。

6.1、babelrc

默認值為true，用於配置是否適用.babelrc和.babelignore文件，當命令行中添加--no-babelrc選項的時候，表示忽略.babelrc和.babelignore文件。在.babelrc文件中配置babelrc個人測試沒有卵用。

6.2、env

默認值為一個空對象{}. env用於配置代碼需要兼容的環境，比如你的代碼要在chrome52上運行，可以這樣配置.babelrc。

1 2 3 4 5 6 7 8 9

{    "presets" : [      [ "env" , {        "targets" : {          "chrome" : 52        }      }]    ] }

配置代碼兼容最新的node，可以這樣設置.babelrc

1 2 3 4 5 6 7 8 9

{    "presets" : [      [ "env" , {        "targets" : {          "node" :  "current"        }      }]    ] }

6.3、ignore

忽略某些文件,默認值為null，比如src文件夾下有person.js和foo.js兩個文件，轉譯的時候你要忽略src文件夾下的foo.js，可以這樣配置.babelrc。這樣就不再轉譯foo.js文件了

1 2 3 4

{      "presets" :[ "env" ],      "ignore" :[ "foo.js" ] }

與ignore相對應的是only選項，only表示只轉譯某些文件。

6.4、minified

是否壓縮轉譯后的代碼，默認值為false

1 2 3 4 5

{      "presets" :[ "env" ],      "ignore" :[ "foo.js" ],      "minified" : true }

6.5、plugins

配置轉譯所需要的插件。使用插件的順序是按照插件在數組中的順序依次調用的。比如如下命令，轉譯的時候先使用transform-decorators-legacy轉譯，再使用transform-class-properties轉譯

1 2 3 4 5 6

{    "plugins" : [      "transform-decorators-legacy" ,      "transform-class-properties"    ] }

6.6、presets

配置你要使用的轉譯器。使用轉譯器的順序是按照轉譯器在數組中的反順序進行調用的。先使用數組最末尾的轉譯器，然后使用倒數第2個，倒數第3個，依次類推。比如使用下面命令的時候，先使用stage-2轉譯器轉譯，再react轉譯器轉譯，最后使用es2015轉譯器轉譯。

1 2 3 4 5 6 7

{    "presets" : [      "es2015" ,      "react" ,      "stage-2"    ] }

6.7、補充：plugins和presets的順序

詳情點這里

• 如果同時存在plugins和presets，則先使用plugins轉譯

• plugin的調用順序是從第一個到最后一個，

• presets的調用的順序是相反的，從最后一個到第一個

7、babel的其他

7.1、babel-node

bable-node是babel-cli自帶的命令，提供了一個支持ES6的REPL環境，它支持node的REPL環境的所有功能，而且可以直接運行ES6代碼。為了體驗下這個功能，我們需要全局安裝babel-cli。然后在命令行執行下面的命令。

安裝

1	npm install --save-dev -g babel-cli

執行命令就會輸出我們代碼執行的結果

1	D:\webpack\demo\es6>babel-node -e   "var name='tom';console.log(`my name is ${name}`)" ;  //my name is tom;

babel-node的詳細用法點擊這里

7.2、babel-register

引用自阮一峰babel講解

babel-register模塊會改寫require命令，為它加上一個鈎子。此后每當使用require加載.js、.jsx、.es、.es6后綴名文件的時候，都會先用babel進行轉碼

安裝

1	$ npm install --save-dev babel-register

使用的時候必須先加載babel-register。

1 2	require( "babel-register" ); require( "./index.js" );

然后，就不需要手動對index.js轉碼了。

需要注意的是，babel-register只會對require命令加載的文件轉碼，而不會對當前文件轉碼。另外，由於它是實時轉碼，所以只適合在開發環境使用。

babel-register的詳細使用方法點擊這里

7.3、babel-core

babel-core主要在node等環境中使用，可以用來開發自己的babel轉譯器。直接調用babel的api對某些代碼或者某些文件進行轉譯。

安裝

1	npm install babel-core --save

使用方法

1 2 3

var  babel =require( 'babel-core' ); babel.transform(code,options); //轉譯程序片段 babel.transform(filename,options,callback);  //轉譯文件

babel-core的詳細使用方法點擊這里

8、在webpack中使用babel。

8.1、安裝webpack

1	D:\webpack\demo\es6>npm install --save-dev webpack

8.2、安裝babel-preset-env和babel-loader。

如果你是跟着我這份教程一路看下來的，那么你babel-preset-env已經安裝了。已經安裝的話就不用再安裝了。記得要安裝babel-loader就好。

1	D:\webpack\demo\es6>npm install --save-dev babel-preset-env babel-loader

此時你的package.json如下。確保devDependencies中有babel-loader、babel-preset-env和webpack即可，其他的可以跟我不同。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

{    "name" :  "es6" ,    "version" :  "1.0.0" ,    "description" :  "" ,    "main" :  "arrow.js" ,    "scripts" : {      "build" :  "babel src -d lib"    },    "keywords" : [],    "author" :  "" ,    "license" :  "ISC" ,    "devDependencies" : {      "babel-cli" :  "^6.24.1" ,      "babel-loader" :  "^7.1.1" ,      "babel-preset-env" :  "^1.6.0" ,      "babel-preset-react" :  "^6.24.1" ,      "webpack" :  "^3.2.0"    } }

　　

8.3、創建webpack.config.js文件

在根目錄下創建webpack.config.js文件，內容如下。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

var  path = require( "path" ); module.exports = {       entry:  './src/person.js' ,       output: {           path: path.resolve(__dirname, "lib" ),           filename:  'person.compiled.js' ,       },       module: {           loaders: [{               test: /\.js$/,               exclude: /node_modules/,               loader:  'babel-loader' ,              query:{                  presets:[ "env" ]              }           }]       }  }

　　

entry為入口文件，我們選擇當前目錄下，src文件夾下的person.js文件作為入口。output為輸出選項，path為輸出的目錄，filename為輸出文件名。query選項為.babelrc中的配置選項。在webpack中設置了query字段后，就不再需要.babelrc文件了。

此時我們的目錄結構是這樣子的。

-lib
-node_modules
-src
    -person.js
 -foo.js -package.json -webpack.config.js

 

8.4、運行webpack。

在命令行中執行webpack，webpack會自動讀取webpack.config.js文件中的配置。然后對我們配置的文件進行轉譯。

1	D:\webpack\demo\es6>webpack

打開lib文件夾，我們發現多了一個轉譯后的文件person.compiled.js。

-lib
    -person.compiled.js
-node_modules
-src
 -person.js  -foo.js -package.json -webpack.config.js

8.5、使用webpack轉譯多個文件

我們src文件夾下除了有person.js文件外，還有一個foo.js文件。但是我們上面的操作只轉譯了person.js文件，為了同時轉譯foo.js文件我們需要在person.js文件中引入foo.js

foo.js文件代碼如下：

1 2	let  name= "tom" ; console.log(`my name is ${name}`);

我們在person.js文件頂部中添加require("./foo");；這樣就可以person.js文件中添加對foo.js的依賴。修改后的person.js代碼如下：

1 2 3 4 5 6 7 8 9 10 11

require( "./foo" ); class  Person{      constructor(){          this .name= "bigbigStrong"      }      sayName(){          console.log(`my name is ${ this .name}`);      } } var  p =  new  Person(); p.sayName();

這樣在編譯后的文件person.compiled.js文件里，就包含了foo.js的代碼。

關於webpack的更多使用方法，請點擊查看webpack文檔

9、總結

關於babel的知識點大概就這些。

• babel常用的轉譯器是babel-preset-env。

• 常用的配置選項是plugins和presets

• 常用的使用場景是在webpack中

  ​

以上講的都是常用的，關於babel更細的知識點還需要你自己查看babel官方文檔。