将一个外部 js 文件导入另一个外部 js 文件答案

【问题标题】：Importing an external js file into another external js file将一个外部 js 文件导入另一个外部 js 文件
【发布时间】：2023-03-08 11:10:02
【问题描述】：

在我的 ASP.Net Core MVC 应用程序中，我有几个页面的单独 .js 文件，它们包含正常的验证和客户端逻辑。

我必须将几个方法放在一个通用的 util.js 文件中，这个文件方法将在其他 js 文件之间共享。

但我无法将此 util.js 的引用添加到其他外部 js 文件中。

我尝试了几种方法

例如我的 util.js

export function ShowAlert(val) {
alert(val);
}

然后在另一个带有 import 语句的 js 文件（MyApp.js）中

import { ShowAlert } from './util'

function Info() {
    var F = document.getElementsByName('txtFName')[0].value
    var L = document.getElementsByName('txtLName')[0].value
    if (F.length > 0 && L.length > 0)
        ShowAlert(F + ' ' + L)
    else
        ShowAlert('Fields Required');
}

但它在导入语句行中给出错误

意外的令牌{

比我尝试使用 babel 工具来获得与浏览器兼容的 js ，这是

//import { ShowAlert } from './util'
var _util = require('./util');

function Info() {
    var F = document.getElementsByName('txtFName')[0].value
    var L = document.getElementsByName('txtLName')[0].value
    if (F.length > 0 && L.length > 0)
        _util.ShowAlert(F + ' ' + L)
    else
        _util.ShowAlert('Fields Required');
}

现在它说 require 没有定义，所以在网上搜索了几篇文章后，我找到了一个解决方案，并在 MyApp.js 之前包含了 require.js

<script src="./require.js" type="text/javascript"></script>
<script src="./MyApp.js" type="text/javascript"></script>

但错误仍然是

尚未为上下文加载模块名称“util”：_。使用 require([])

如何将一个 js 文件引用到另一个文件中，为什么 import 会出现错误？

更新 1

Util.js

export default function ShowAlert(val) {
alert(val);}

MyApp.js

import { ShowAlert } from './util';
//var _util = require('./util');
function Info() {
    var F = document.getElementsByName('txtFName')[0].value
    var L = document.getElementsByName('txtLName')[0].value
    if (F.length > 0 && L.length > 0)
        ShowAlert(F + ' ' + L)
    else
        ShowAlert('Fields Required');
}

【问题讨论】：

标签： javascript asp.net-core-mvc

【解决方案1】：

要在客户端使用 JavaScript 模块，您需要：

一个browser which supports them
声明您将它们与type="module"一起使用

例如：

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<h1>Test</h1>
<script type="module" src="main.js"></script>

main.js

import {sum} from './module.js';

const value = sum(1,2);
const node = document.createTextNode(value);
document.body.appendChild(node);

module.js

function sum(a,b) {
    return a + b;
}

export { sum }

【讨论】：

【解决方案2】：

将 type="module" 添加到您的 app.ja（主脚本）

<script src="MyApp.js" type="module"></script>

单独的函数和导出这样做（更具可读性）：

function ShowAlert(val) { alert(val); } export { ShowAlert }

如果您想导出更多功能，请这样做：

 export { ShowAlert ,  ShowAlert1 , ShowAlert2 , ShowAlert2}

在 HTTP 服务器上运行您的脚本

【讨论】：

如果您需要在 1 行中执行此操作，请在导出后添加默认值，但您还必须更改导入状态。如果您要分离导出文件，则导入不会改变，如果没有，它应该可以工作。告诉我
哎呀...你的 js 文件在 1 个文件夹中？
是的，它们在同一个文件夹中并检查更新 1，但它仍然给出错误
让我们continue this discussion in chat。