使用 JavaScript 导入节点模块

Question

对于这个简单的问题，我深表歉意，但我对网络开发还很陌生，JavaScript。

我想导入一个我使用 npm 安装的包，特别是 shopify-buy 遵循这里的指南：https://shopify.github.io/js-buy-sdk/

该包在我的 node_modules 文件夹中，我正在尝试使用 import Client from 'shopify-buy';

将其导入到 JavaScript 文档中

当我尝试加载 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"，你需要设置一个模块捆绑器和 ES6 编译器，比如 Webpack 和 Babel。您需要 google 它们并找到相应的设置教程。

使用 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 模块在 module-mode 脚本中只能是运行。将您的 HTML 更改为以下内容：

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

使用 JavaScript 导入节点模块

Importing Node Modules With JavaScript

javascript

node.js

shopify

npm