1. 程式人生 > >解決問題SyntaxError: Unexpected token import

解決問題SyntaxError: Unexpected token import

es5 實驗 .com imp 穩定 help cli 默認 nodejs

ES6語法的模塊導入導出(import/export)功能,我們在使用它的時候,可能會報錯:

SyntaxError: Unexpected token import
語法錯誤:此處不應該出現import

技術分享圖片

我遇到的情況是import語法不識別導致的。在這裏,有兩種方法可以解決。

1: 使用node的v8及之後的版本

因為,node需要v8.x之後的版本才支持ECMAScript Modules 和 imort 語法
目前,node穩定版本是v8.11.2
可以使用nvm來安裝管理查看多個node版本。

可以使用--experimental-modules實驗模塊標誌來啟用加載ECMAScript Modules的特性。

而且作為ES模塊加載的文件名,必須以.mjs後綴結尾

node --experimental-modules my-app.mjs

此種方法,在輸出的時候會提示:

(node:16208) ExperimentalWarning: The ESM module loader is experimental.

表示是個實驗模塊,到時候可能會修改。
例子:https://github.com/weiqinl/demo/tree/master/01-es6-import

2: 使用babel,通用方法

技術分享圖片

瀏覽器直接支持import程度比較低,所以需要babel來將import轉換為es5語法。

安裝

通過 npm:

npm install --save-dev babel-preset-env babel-cli

或者通過 yarn:

yarn add babel-preset-env --dev

使用

沒有選項的默認行為將運行所有transform(與 babel-preset-latest 相同)。
新建一個.babelrc文件,並在裏面寫入:

{
    "presets": ["env"]
}

執行

babel-node index.js

我的例子: https://github.com/weiqinl/demo/tree/master/01-es6-import
babel官方給出的一個例子:https://github.com/babel/example-node-server

參考: https://github.com/nodejs/help/issues/53

解決問題SyntaxError: Unexpected token import