轶哥博客

九零后全栈开发者,未来学学者。想做的事情太多,既要环游世界,也妄图改变点什么的强迫症。

Node.js6 报Unexpected token import错误解决方案
  • May 5, 2016 10:49 PM
  • 教程
  • 3111

Node.js ES6支持

  虽然Node.js6这个版本已经能够支持96%的ECMAScript 2015 (ES6),但是仍然不支持import。关于Node.js各个版本对ES6的支持可以浏览这个网站:http://node.green/

  Node.js 6 中可以启用ES6功能。在node命令后面加上“--es_staging”或“--harmony”就好。

解决不支持import的方案

  目前来说只有一个方案就是用Babel

 "dependencies": {
    "babel-core": "^6.7.6",
    "babel-runtime": "^6.6.1"
  },
  "devDependencies": {
    "babel-cli": "^6.7.5",
    "babel-plugin-transform-runtime": "^6.7.5",
    "babel-preset-es2015": "^6.6.0",
    "babel-register": "^6.7.2",
    "browser-sync": "^2.12.3",
    "webpack": "^1.12.15"
  }

  以上是轶哥推荐的babel搭配。在调试过程中可以使用babel-node XXX.js代替node命令来启动需要运行的js程序。例如:

"scripts": {
    "start": "babel-node ./server/index.js"
}

  然而这也不是最佳方案。Babel推荐把ES6的代码编译成低版本后再运行。也就是说你可能需要一个类似这样的Makefile。

PATH := ./node_modules/.bin:$(PATH)
CLIENT := public
SERVER := app/server-bundle.js

build: $(CLIENT) $(SERVER)

$(CLIENT):
    BUNDLE=client NODE_ENV=production webpack --config ./webpack/prod.config.babel.js

$(SERVER):
    BUNDLE=server NODE_ENV=production webpack --config ./webpack/prod.config.babel.js

dev:
    nodemon -x babel-node -w ./api ./api & \
    babel-node ./dev-server & \
    wait

lint:
    eslint api app webpack dev-server.js

test:
    echo THERE ARE NO TESTS YET

clean:
    rm -rf $(CLIENT) $(SERVER)

.PHONY: build dev lint test clean

  这么一来,你写ES6版本的JavaScript程序就可以体验到写JAVA或C++一样的感觉了。

  首先需要

$ npm install --save-dev babel-cli

  现在,我们不直接从命令行运行 Babel 了,取而代之我们将把运行命令写在 npm scripts 里,这样可以使用 Babel 的本地版本。

  只需将"scripts" 字段添加到你的 package.json 文件内并且把 babel 命令写成 build 字段。

 {
    "name": "my-project",
    "version": "1.0.0",
+   "scripts": {
+     "build": "babel src -d lib"
+   },
    "devDependencies": {
      "babel-cli": "^6.0.0"
    }
  }

  现在可以在终端里运行:npm run build,这将以与之前同样的方式运行 Babel,但这一次我们使用的是本地副本。

  以上内容参考自:https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md#toc-babel-cli