Javascript模块引入方式

@带甜味的盐@

已于 2023-08-10 10:44:45 修改

阅读量1.2k

点赞数

分类专栏：前端 SYW 文章标签： javascript html

于 2023-08-10 10:43:08 首次发布

本文链接：https://blog.csdn.net/s_y_w123/article/details/132193520

版权

SYW 同时被 2 个专栏收录

95 篇文章 3 订阅

订阅专栏

前端

81 篇文章 7 订阅

订阅专栏

Javascript中引入模块有两种方式：

script 方式
import 方式

下面就简单说下这两种引入方式。

无论那种引入，html都是必不可少的，所以首先我们要创建一个html文件，就叫index.html吧。然后再有两个js文件。

整体的目录的结构是这样的：

─Code
    └─js
     	├─module_a.js
     	├─module_b.js
    ├─index.html

script 引入

这种基本不用多说，直接在index.html中：

<script type="text/javascript" src="./js/module_a.js"></script>
<script type="text/javascript" src="./js/module_b.js"></script>

稀疏平常的模块化导入。

import 引入

主流浏览器发展到了现在，也基本支持了JavaScript高级语法的解析，其中就包括export和import。

要使用import的导入方式，需要在script标签上规定type为module

<script type="module">
	import { module_a } from './js/module_a.js';
	import { module_b } from './js/module_b.js';
</script>

当然了，别忘了在module_a.js | module_b.js文件中使用export导出这两个变量。

module_a.js

export const module_a = 'module a';

module_b.js同理，这里就不写了。

再进一步，分割线上面说的import的引入，还可以更加精简，还可以做一下路径映射importmap：
为了大家看的清楚，我写的全面一点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块引入测试</title>
</head>
<body></body>
<!-- 尤其注意，importmap 块中接受的是一个`JSON`，注意下 引号 和 分号 别写错了。-->
<script type="importmap">
    {
        "imports": {
            "module/": "./js/"
        }
    }
</script>
<script type="module">
	import { module_a } from 'module/module_a.js';
	import { module_b } from 'module/module_b.js';
</script>
</html>

有了importmap的映射，当浏览器解析到module/这个关键词时，会自动去importmap中匹配，并把对应的路径拿到拼接成一个完成的路径。

所以如果想import { module_a } from 'module_a' 这样引入时，那我们只需要配置下importmap:

<script type="importmap">
    {
        "imports": {
            "module_a": "./js/module_a.js"
        }
    }
</script>

项目简单时看似很麻烦，但当项目模块比较多时，这种写法的优势不言而喻。

那，脑子不妨在活跃一点，一般写项目都会有一个入口文件，此时不妨在创建一个index.js

─Code
    └─js
     	├─module_a.js
     	├─module_b.js
    ├─index.js
    ├─index.html

有了这个入口文件，那我们就可以进一步改造下模块的引入：

首先在index.html中：

<script type="importmap">
    {
        "imports": {
            "module/": "./js/"
        }
    }
</script>
<script type="module" src="./index.js"></script>

在index.js中：

	import { module_a } from 'module/module_a.js';
	import { module_b } from 'module/module_b.js';

别忘了module_a.js | module_b.js 中使用export导出。

这种组织方式岂不是更加优秀了。

@带甜味的盐@

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript模块引入方式

原生JavaScript中使用import组织项目模块。
复制链接

扫一扫

专栏目录

Javascript模块引入方式

script 引入

import 引入

“相关推荐”对你有帮助么？