web-dev-qa-db-ja.com

JavaScriptを使用したNode Modulesのインポート

簡単な質問をお詫びしますが、私はWeb開発とJavaScriptにかなり慣れていません。

Npmを使用してインストールしたパッケージ、具体的にはshopifyをインポートしたい-ここのガイドに従って購入する： 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>
javascriptnode.jsnpmshopify
5
Kyle2595

ブラウザのimport sth from "something"などの構文でnpmモジュールを使用する場合は、モジュールバンドラーとES6コンパイラ（WebpackやBabelなど）を設定する必要があります。あなたはそれらをグーグルで検索し、それに応じてそれらを設定するためのチュートリアルを見つける必要があるでしょう。

SDKはブラウザが理解できるようにすでに構築されているため、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);
3
Ippei Tanaka

JavaScriptモジュールは、モジュールモードのスクリプトでのみ実行できます。 HTMLを次のように変更します。

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