node_modules 包導入上的意外標識符

Question

我正在嘗試使用這個mapbox 輔助功能插件，但是一旦我將該插件安裝到我的項目中，我在每個導入語句中都會收到以下錯誤：

.../node_modules/@mapbox/mapbox-gl-accessibility/index.js:3

import xtend from 'xtend';
       ^^^^^
SyntaxError: Unexpected identifier

在我看來，包的依賴項沒有被讀取/安裝

我試過/考慮過：

• 從 node_modules 中跳入包並運行 yarn 命令（這應該不是必需的，因為我有一個 yarn.lock 文件可以為我執行此操作）
• 更改語法以使用 require 語法代替 import
• 我的項目沒有 html 文件可以在腳本標簽中加載“類型：模塊”

有沒有人遇到過這個問題並知道我該如何解決？

Answer 1

會不會是你忘記用 babel 來轉換 ES6 語法了。

導入是 ES6 語法

如果使用 webpack，則需要安裝 babel-loader。

npm install -D babel-loader @babel/core @babel/preset-env webpack

並在您的 webpack.config.js 中添加配置

 module: { rules: [ { test: /\\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }

或者您可以嘗試遵循需要您的包裹的方法：

var xtend = require('xtend');