初探babel轉換器的安裝與使用

時間 2019-11-10

標籤初探 babel 轉換器安裝使用简体版

原文原文鏈接

1、配置`.babelrc文件（沒有名字的文件）`

Babel的配置文件是.babelrc，存放在項目的根目錄下。使用Babel的第一步，就是配置這個文件。javascript

基本格式以下：html

{ "presets": [], "plugins": [] }
在windows系統中，好像是不能直接創建無名文件的，你能夠打開命令行

type nul>.babelrc


二：安裝

# ES2015轉碼規則
 npm install --save-dev babel-preset-es2015

# ES7不一樣階段語法提案的轉碼規則（共有4個階段），選裝一個
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
【---這意味着你的先安裝一個node--】

三：改寫.babelrc配置文件java

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

　好了到此你的babel已經安裝好了。。。。。。node

接下來你能夠試試demowebpack

在目錄中創建一個es6.js的文件，es6

 import 'babel-polyfill';　
 import  a from "./common";
 var b= a();
 　"use strict";

　　[1, 2, 3].map( x=>
　　   x * x;
　　});

     var obj={
        add(){
            return b;
        }
     }

在命令行中，你能夠輸出來看看：web

$　babel es6.js

結果：npm

可是通常而言，咱們使用babel的目的是將es6語法的js文件轉換成es5文件，而不是在命令行上輸出json

將es6.js轉換後輸出到es5.js文件中（使用 -o 或 --out-file ）gulp

babel es6.js -o es5.js 
或者
babel es6.js --out-file es5.js

將整個文件夾進行轉換（編譯整個src文件夾並輸出到lib文件夾中（使用 -d 或 --out-dir ））

　babel src -d lib
    or
　babel src --out-dir lib

若是每一次更改文件，就得這樣編譯一次，很麻煩

實時監控：實時監控es6.js一有變化就從新編譯（使用 -w 或 --watch ）

監控文件：
$ babel es6.js -w --out-file es5.js
或者
$ babel es6.js --watch --out-file es5.js

監控文件夾：
$ babel src  -w  --out-dir lib

demo:(將src_new目錄中的文件轉義到src_new_lib中)

編譯整個src文件夾並輸出到一個文件中

babel src --out-file es5.js

直接輸入babel-node命令，能夠在命令行中直接運行ES6代碼

demo01:

demo02:

執行：$ babel-node es6.js

es6.js

//import 'babel-polyfill';　
import  a from "./common";
 var b= a();
 　"use strict";var obj={
        add(){
        return b;
        }
     }

/*  var newArray=Array.from( {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
});
*/
var o=obj.add;

　console.log(o());

common.js

 export default  function(){
    return 99;
 }

另外一種方式：

在package.json中進行配置，直接使用命令行。

當咱們按照上面的一步步走來時，基本上已經完成了99%,那麼接下來就該試試其餘方式了。

1）首先你的在命令行輸入

npm init //生成一個package.json文件

2）配置文件

{ 
......
　　"script": { "build": "babel src -d libs" } //將src文件轉義到libs文件夾
.....
}

3)直接運行

npm run build

瀏覽器環境：

Babel也能夠用於瀏覽器環境，可是聽說babel6.0以後再也不直接提供瀏覽器版本，要用構建工具構建出來。

固然也能夠安裝5.x版本的babel-core模塊獲取。

$ npm install babel-core@old

而後在你的項目目錄下的node_modules中找文件，插到你的網頁

<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

demo :

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
 </head>
 <body>
<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
     var newArray=Array.from( {
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    });
    console.log(newArray);
</script>
</body>
</html>

關於：babel-polyfill

Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，好比Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（好比Object.assign）都不會轉碼。

舉例來講，ES6在Array對象上新增了Array.from方法。Babel就不會轉碼這個方法。若是想讓這個方法運行，必須使用babel-polyfill，爲當前環境提供一個墊片。

$ npm install --save babel-polyfill

而後，在腳本頭部，加入以下一行代碼。

Babel 所作的只是幫你把‘ES6 模塊化語法’轉化爲‘CommonJS 模塊化語法’，其中的  等是 CommonJS 在具體實現中所提供的變量。import 'babel-polyfill'; // 或者 require('babel-polyfill');

參考：http://www.ruanyifeng.com/blog/2016/01/babel.html


一點補充：即便使用了babel，可是瀏覽器仍是沒法對import ,require進行識別

requireexports

任何實現 CommonJS 規範的環境（如 node 環境）能夠直接運行這樣的代碼，而瀏覽器環境並無實現對 CommonJS 規範的支持，因此咱們須要使用打包工具（bundler）來進行打包，說的直觀一點就是把全部的模塊組裝起來，造成一個常規的 js 文件。

經常使用的打包工具包括 browserify webpack gulp 等。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

初探babel轉換器的安裝與使用

1、配置.babelrc文件（沒有名字的文件）

1、配置`.babelrc文件（沒有名字的文件）`