Question

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

我必须在一个通用的util.js文件中放一些方法，并且该文件方法将在另一个js文件中共享。

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

我尝试了几种方法

例如我的util.js

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

并且比带有导入语句的另一个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文件引用到另一个文件中，为什么导入在这里给出错误？

更新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');
}

Answer 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 }

Answer 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服务器上运行脚本

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

2 个答案: