1. 程式人生 > >用babel轉碼ES6

用babel轉碼ES6

目錄結構 圖片 寫入 rip console from 語法 inf define

首先可以用es-checker檢測一下本機對ES6的支持程度

npm install -g es-checker && es-checker

技術分享圖片

可見,不支持ES6的import和export語法,我們可以寫個有該語法的腳本運行下。

創建項目文件夾,結構如下:

技術分享圖片

lib.js:

export var a = 10;

main.js:

import { a } from ‘./lib‘;
console.log(a);

執行 node main.js

技術分享圖片

發現確實無法執行。此時我們可以用babel進行轉碼:

首先安裝label-cli

npm install -g babel-cli

再在項目文件夾先創建 .babelrc 文件

安裝轉碼規則:

npm install --save babel-preset-latest

然後寫入到 .babelrc 文件中

{
	"presets": [
		"latest"
	]
}

執行 babel main.js 即可查看轉碼之後的代碼,也可以輸出到文件中:

babel main.js -o out.js

就可以寫入到out.js中,然而我們這裏有兩個文件在同一文件夾下,我們可以直接將文件夾轉碼

babel test -d src

即可將test文件夾下的文件轉碼到src文件夾下。

轉碼成功後的目錄結構如下:

技術分享圖片

轉碼後的main.js:

‘use strict‘;

var _lib = require(‘./lib‘);

console.log(_lib.a);

lib.js:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var a = exports.a = 10;

轉碼成功,用node執行轉碼後的文件:

技術分享圖片

ok。

用babel轉碼ES6