如何在ASP.NET CORE MVC中導入一個js文件模塊？

Question

我剛剛在 wwwroot/js/base.js 上創建了一個 js 模塊文件：

export const elements = {
...somthing
};

當我嘗試從 wwwroot/js/site.js 導入它時，例如

import {elements} from './base';

我得到這個錯誤：

Uncaught SyntaxError: Cannot use import statement outside a module

我錯過了什么？

Answer 1

如果你想導入一個js文件模塊，你需要像這樣添加（你必須在腳本標簽中使用type="module" ）：

<script type="module" src="~/js/site.js"></script>

site.js 默認導入到Views/Shared/_Layout.cshtml中。可以查看Views/Shared/_Layout.cshtml並更改

<script src="~/js/site.js" asp-append-version="true"></script>

至

<script type="module" src="~/js/site.js" asp-append-version="true"></script>

Answer 2

有時您需要在添加 type="module" 后更新文件的 JS 版本，如下所示：

<script type="module" src="~/js/site.js?v=101" asp-append-version="true"></script>

因為您的瀏覽器可以緩存已經存在的腳本。