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
2018-10-18 更新
無法識別import
,換一種想法,也可以說是低版本瀏覽器不支持。現在babel已經更新到版本7了,我們用最新的babel來實現。
該問題的babel7的解決方案:https://www.cnblogs.com/weiqinl/p/9773048.html