ES6語法的模塊導入導出(import/export
)功能,咱們在使用它的時候,可能會報錯:html
SyntaxError: Unexpected token import 語法錯誤:此處不該該出現import
我遇到的狀況是import
語法不識別致使的。在這裏,有兩種方法能夠解決。node
由於,node須要v8.x以後的版本才支持ECMAScript Modules 和 imort 語法 目前,node穩定版本是v8.11.2 能夠使用nvm
來安裝管理查看多個node版本。git
能夠使用--experimental-modules
實驗模塊標誌來啓用加載ECMAScript Modules的特性。 並且做爲ES模塊加載的文件名,必須以.mjs
後綴結尾es6
node --experimental-modules my-app.mjs
此種方法,在輸出的時候會提示:github
(node:16208) ExperimentalWarning: The ESM module loader is experimental.
表示是個實驗模塊,到時候可能會修改。 例子:https://github.com/weiqinl/demo/tree/master/01-es6-importnpm
瀏覽器直接支持import
程度比較低,因此須要babel來將import
轉換爲es5語法。瀏覽器
經過 npm:babel
npm install --save-dev babel-preset-env babel-cli
或者經過 yarn:app
yarn add babel-preset-env --dev
沒有選項的默認行爲將運行全部transform(與 babel-preset-latest
相同)。 新建一個.babelrc
文件,並在裏面寫入:es5
{ "presets": ["env"] }
babel-node index.js
個人例子: https://github.com/weiqinl/demo/tree/master/01-es6-import babel官方給出的一個例子:https://github.com/babel/example-node-server
沒法識別import
,換一種想法,也能夠說是低版本瀏覽器不支持。如今babel已經更新到版本7了,咱們用最新的babel來實現。 該問題的babel7的解決方案:https://www.cnblogs.com/weiqinl/p/9773048.html