个性化阅读
专注于IT技术分析

如何在一个JavaScript文件中包含另一个JavaScript文件?有哪几种方式?

JavaScript中是否有类似于CSS中的@import的东西允许你在一个JavaScript文件中包含另一个JavaScript文件?有哪几种方式?

旧版本的JavaScript没有import、include或require,因此开发了许多不同的方法来解决这个问题。但是从2015年(ES6)开始,JavaScript就有了在Node中导入模块的ES6模块标准。,大多数现代浏览器也支持它。为了与旧浏览器兼容,可以使用构建和/或转换工具。

1、ES6模块

从v8.5开始,在Node.js中就支持ECMAScript (ES6)模块,并带有—experimental-modules标志,所有涉及的文件都必须有.mjs扩展名。

// module.mjs
export function hello() {
    return "Hello";
}

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

2、浏览器中的ECMAScript模块

自Safari 10.1、Chrome 61、Firefox 60和Edge 16以来,浏览器一直支持直接加载ECMAScript模块(不需要Webpack之类的工具)。

<script type="module">
  import { hello } from './hello.mjs';
  hello('world');
</script>

// hello.mjs
export function hello(text) {
    const div = document.createElement('div');
    div.textContent = `Hello ${text}`;
    document.body.appendChild(div);
}

3、浏览器动态导入

<script type="module">
  import('hello.mjs').then(module => {
      module.hello('world');
    });
</script>

4、Node.js require

老式的模块导入方式,在Node中仍被广泛使用module.exports/require。

// mymodule.js
module.exports = {
    hello: function() {
       return "Hello";
    }
 }
 // server.js
 const myModule = require('./mymodule');
 let val = myModule.hello(); // val is "Hello" 
赞(0) 打赏
未经允许不得转载:srcmini » 如何在一个JavaScript文件中包含另一个JavaScript文件?有哪几种方式?
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏