第十三號艦隊
0%

Install NodeJS and Babel6

Posted on Edited on In

由於Ubuntu自帶的NodeJS版本實在太舊了，只好自行安裝，動手跑一遍流程，記錄下來。目前的NodeJS還無法完全支援ES6，所以還需要Babel之類的轉成ES5執行。

使用NVM安裝NodeJS

1
2
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash
$ nvm install stable

安裝Babel

1
$ npm i -g babel-cli

First Project

1
2
3
$ mkdir test && cd test
$ npm init
$ vim test.js

以下是測試程式，用到了ES6的let和ES7的async，await等Feature。

1
2
3
4
5
6
7
8
9
10
11
12
function sleep(ms = 0) {
  return new Promise((resolve, reject) => setTimeout(resolve, ms));
}

async function test() {
  for (let i = 0; i < 10; i++) {
    await sleep(500);
    console.log(`i = ${i}`);
  }
}

test().then(() => console.log('done'));

執行的時候遇到困難

1
2
3
4
5
6
7
8
9
$ babel-node test.js
SyntaxError: /test/test.js: Unexpected token (5:6)
  3 | }
  4 |
> 5 | async function test() {
    |       ^
  6 |   for (let i = 0; i < 10; i++) {
  7 |     await sleep(500);
  8 |     console.log(`i = ${i}`);

因為Babel沒辦法正確的轉譯ES7語法

Problem Solving

1
$ npm i babel-preset-es2015 babel-preset-stage-0 --save-dev

在目前目錄上新增.babelrc`

1
2
3
{
  "presets": ["es2015", "stage-0"]
}

這樣程式就能漲常執行。

Compile to ES5

當然，可能還有跑在Browser的需求，因此轉成ES5還是必須的。

1
2
3
4
5
6
7
8
9
10
11
12
$ babel test.js --out-file test.compiled.js
$ node test.compiled.js 
/test/test.compiled.js:14
  var ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
                              
ReferenceError: regeneratorRuntime is not defined
    at /test/test.compiled.js:14:31
``
還是遇到問題。
#### Problem Solving
~~~bash
$  npm i babel-polyfill --save-dev

在est.compile.js爭最前面加上

1
require("babel-polyfill");
1
$ node  test.compiled.js

這下正常了