使用JavaScript導入節點模塊

Question

我為這個簡單的問題道歉，但我對Web開發和JavaScript都很陌生。

我想導入一個我使用npm安裝的軟件包，特別是shopify-buy遵循指南： https ：//shopify.github.io/js-buy-sdk/

該軟件包位於我的node_modules文件夾中，我正在嘗試使用import Client from 'shopify-buy';將其導入JavaScript文檔import Client from 'shopify-buy';

當我嘗試在Chrome中加載所有內容時，我在導入行上收到錯誤消息

Uncaught SyntaxError: Unexpected identifier

Firefox錯誤有點不同： import declarations may only appear at top level

我究竟做錯了什么？

編輯：

導入行是我的JavaScript文件中的第一行。 我的HTML文件正確鏈接到JS文件（我認為）。

shopify.js

// Functions for SHOPIFY
import Client from 'shopify-buy';

const client = Client.buildClient({
    domain: 'xxxxx.myshopify.com',
    storefrontAccessToken: 'xxxxx'
});

的index.html

<script src="javascript/shopify.js"></script>

Answer 1

如果你想通過語法使用npm模塊，比如import sth from "something"瀏覽器的import sth from "something" ，你需要設置一個模塊捆綁器和ES6編譯器，比如Webpack和Babel。 你需要谷歌他們並找到相應的設置教程。

使用SDK的一種簡單方法似乎是使用CDN，因為它已經被瀏覽器構建了。 就像是：

的index.html

<script src="http://sdks.shopifycdn.com/js-buy-sdk/v1/latest/index.umd.min.js"></script>
<script src="javascript/shopify.js"></script>

shopify.js

const client = ShopifyBuy.buildClient({
    domain: 'your-shop-name.myshopify.com',
    storefrontAccessToken: 'your-storefront-access-token'
});

console.log(client); 

Answer 2

JavaScript模塊只能在模塊模式腳本中運行。 將您的HTML更改為以下內容：

<script type="module" src="javascript/shopify.js"></script>