JS 模块

JS 中常用的模块：

ES module

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

编写模块文件 "test.js"

export const name = 'square';

导入模块并测试

<!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>

导出多个元素

export { name, draw, reportArea, reportPerimeter };

默认导出

export default randomSquare;

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

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

 

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

// 导入模块
const constants_1 = require("./constants");

// 导出
exports.twoPi = constants_1.valueOfPi * 2;

　　

AMD模块

// 导入模块
define(["require", "exports", "./constants"], function (require, exports, constants_1) {

    // 导出
    exports.twoPi = void 0;
    exports.twoPi = constants_1.valueOfPi * 2;
});

　　

UMD模块

(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模块

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模块

// 当前文件就是一个模块，并且命名为'foo'
goog.module('foo');

// 导入模块
const Quux = goog.require('baz.Quux');

// 导出
exports.Bar = function() { /* … */ };

　　

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

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

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

{
  "compilerOptions": {
    "module": "commonjs"
  }
}

 

有这些选项：

  • none

  • commonjs

  • amd

  • umd

  • system

  • es6/es2015

  • es2020

  • es2022

  • esnext

  • node16

  • nodenext

举例如下：

export class Student {
    public sayName(): void {
        console.log("aaa");
    }
}

 

使用如下的tsconfig

{
    "compilerOptions": {
        "target": "ES5",
        "module": "ES2015",
        "importHelpers": true,
        "lib": ["es2015", "DOM"]
    },
    "include": [
        "test.ts"
    ]
}

　　

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

<!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>

 

 

 



 






            

            
posted @ 
2022-12-13 18:02 
内心澎湃的水晶侠 
阅读(143) 
评论(0) 
 
收藏 
举报