如何在另一个 JavaScript 文件中包含一个 JavaScript 文件? [英] How do I include a JavaScript file in another JavaScript file?
问题描述
JavaScript 中是否有类似于 CSS 中的 @import 的东西，允许您将一个 JavaScript 文件包含在另一个 JavaScript 文件中?
旧版本的 JavaScript 没有导入、包含或要求，因此已经开发了许多不同的方法来解决这个问题.
但自 2015 年 (ES6) 以来，JavaScript 已采用 ES6 模块 标准来导入模块Node.js，大多数现代浏览器也支持.
为了与旧浏览器兼容，构建工具，如 Webpack 和 Rollup 和/或诸如 Babel 之类的转译工具.
ES6 模块
ECMAScript (ES6) 模块从 v8.5 开始被支持在 Node.js 中，具有--experimental-modules 标志，并且至少 Node.js v13.8.0 没有标志.要启用ESM"(相对于 Node.js 以前的 CommonJS 样式模块系统 ["CJS"])，您可以在 package.json"type": "module"> 或给文件扩展名 .mjs.(同样，如果您的默认值为 ESM，则使用 Node.js 以前的 CJS 模块编写的模块可以命名为 .cjs.)
使用package.json:
{类型":模块"}然后module.js:
导出函数 hello() {return "你好";}然后main.js:
import { hello } from './module.js';让 val = hello();//val 是你好"；使用 .mjs，您将拥有 module.mjs:
导出函数hello() {return "你好";}然后main.mjs:
import { hello } from './module.mjs';让 val = hello();//val 是你好"；浏览器中的 ECMAScript 模块
浏览器支持直接加载 ECMAScript 模块(不需要像 Webpack 这样的工具)自从 Safari 10.1、Chrome 61、Firefox 60 和 Edge 16.在 caniuse<检查当前支持/a>.无需使用 Node.js 的 .mjs 扩展名；浏览器完全忽略模块/脚本上的文件扩展名.
//hello.mjs -- 或者它可以是简单的 `hello.js`导出函数你好(文本){const div = document.createElement('div');div.textContent = `你好 ${text}`;document.body.appendChild(div);}在 https://jakearchibald.com/2017/es-modules-阅读更多信息浏览器内/
浏览器中的动态导入
动态导入让脚本根据需要加载其他脚本:
在 https://developers.google.com/web 上阅读更多信息/updates/2017/11/dynamic-import
Node.js 需要
在 Node.js 中仍然广泛使用的旧 CJS 模块样式是 module.exports/需要系统.
//mymodule.js模块.出口 = {你好:函数(){return "你好";}}//server.jsconst myModule = require('./mymodule');让 val = myModule.hello();//val 是你好"JavaScript 还有其他方法可以在不需要预处理的浏览器中包含外部 JavaScript 内容.
AJAX 加载
您可以使用 AJAX 调用加载额外的脚本，然后使用 eval 来运行它.这是最直接的方法，但由于 JavaScript 沙箱安全模型，它仅限于您的域.使用 eval 也为漏洞、黑客和安全问题打开了大门.
获取加载
与动态导入一样，您可以通过 fetch 调用加载一个或多个脚本，使用承诺控制脚本依赖项的执行顺序，使用 Fetch Inject 库:
fetchInject(['https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js']).then(() => {console.log(`在不到 ${moment().endOf('year').fromNow(true)}` 内完成})jQuery 加载
$.getScript("my_lovely_script.js", function() {alert("脚本已加载但不一定执行.");});动态脚本加载
您可以将带有脚本 URL 的脚本标记添加到 HTML 中.为了避免 jQuery 的开销，这是一个理想的解决方案.
脚本甚至可以驻留在不同的服务器上.此外，浏览器会评估代码.
