JS 模块

JS 中常用的模块：

ES module

浏览器原生支持的模块，typescript也是参考的这个模块

编写模块文件 "test.js"

?
1
export const name = 'square';

导入模块并测试

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     
</head>
<body>
    <input id="input">
    <script type="module">
        import {name} from './test.js';
        alert(name);
    </script>
</body>
</html>

导出多个元素

?
1
export { name, draw, reportArea, reportPerimeter };

默认导出

export default randomSquare;

导入的时候，默认到处只允许导出一个模块，所以导入的时候，任何命名都可以找到这个模块

?
1
import randomxxx from './modules/square.mjs';

 

除了ES模块，常见的模块还有Common JS模块

?
1
2
3
4
5
// 导入模块
const constants_1 = require("./constants");
 
// 导出
exports.twoPi = constants_1.valueOfPi * 2;

　　

AMD模块

?
1
2
3
4
5
6
7
// 导入模块
define(["require", "exports", "./constants"], function (require, exports, constants_1) {
 
    // 导出
    exports.twoPi = void 0;
    exports.twoPi = constants_1.valueOfPi * 2;
});

　　

UMD模块

?
1
2
3
4
5
6
7
8
9
10
11
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "./constants"], factory);
    }
})(function (require, exports) {
    exports.twoPi = void 0;
});

　　

SystemJS模块

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
System.register(["./constants"], function (exports_1, context_1) {
    var constants_1, twoPi;
    var __moduleName = context_1 && context_1.id;
    return {
        setters: [
            function (constants_1_1) {
                constants_1 = constants_1_1;
            }
        ],
        execute: function () {
            exports_1("twoPi", twoPi = constants_1.valueOfPi * 2);
        }
    };
});

Google还定义了goog模块

?
1
2
3
4
5
6
7
8
// 当前文件就是一个模块，并且命名为'foo'
goog.module('foo');
 
// 导入模块
const Quux = goog.require('baz.Quux');
 
// 导出
exports.Bar = function() { /* … */ };

　　

CommonJS和AMD导出的时候，都是给exports上面记东西，只是导入不太一样。

CommonJS导入直接调用require，AMD导入需要调用define方法。

编写Typpescript的时候，采用ES模块，但是编译的时候，可以通过不同选项，产出不同类型的模块代码

?
1
2
3
4
5
{
  "compilerOptions": {
    "module": "commonjs"
  }
}

 

有这些选项：

  • none

  • commonjs

  • amd

  • umd

  • system

  • es6/es2015

  • es2020

  • es2022

  • esnext

  • node16

  • nodenext

举例如下：

?
1
2
3
4
5
export class Student {
    public sayName(): void {
        console.log("aaa");
    }
}

 

使用如下的tsconfig

?
1
2
3
4
5
6
7
8
9
10
11
{
    "compilerOptions": {
        "target": "ES5",
        "module": "ES2015",
        "importHelpers": true,
        "lib": ["es2015", "DOM"]
    },
    "include": [
        "test.ts"
    ]
}

　　

编译后的js文件，由于使用ES模块，可以直接在浏览器运行了：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
</head>
 
<body>
    <input id="input">
    <script type="module">
        import { Student } from './test.js';
        var stu = new Student();
        stu.sayName();
    </script>
</body>
 
</html>

 

 

 

?
1
 

 

posted @   内心澎湃的水晶侠  阅读(129)  评论(0)  编辑  收藏  举报
相关博文：
·  Typescript 编译模块
·  JS中的模块
·  JavaScript学习笔记：模块
·  JavaScript核心功能之模块的导入导出
·  12 - TS的模块x
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 【杂谈】分布式事务——高大上的无用知识？
点击右上角即可分享
微信分享提示
AI IDE Trae