使用JavaScript导入节点模块

时间:2018-02-28 03:09:23

标签: javascript node.js npm shopify

我为这个简单的问题道歉,但我对网络开发和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>

2 个答案:

答案 0 :(得分:1)

如果您想通过语法使用npm模块,例如浏览器的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); 

答案 1 :(得分:1)

JavaScript模块只能在模块模式脚本中运行。将您的HTML更改为以下内容:

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