模块打包的三种方式----commonJs、requireJs和esm的简单使用

最新推荐文章于 2024-05-24 14:42:16 发布

野生♆奥特曼

最新推荐文章于 2024-05-24 14:42:16 发布

阅读量2k

点赞数

分类专栏： webpack 文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/qq_64143127/article/details/123467297

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.commonJs方式

1) 首先定义两个js文件，分别是main.js和server.js内容分别如下

main.js:

const add = (x, y) => x + y;
const cha = (x, y) => x - y;

module.exports = {
    add,
    cha
}

server.js:

const math = require("./main.js")
console.log(math.add(100,2000));

2)定义好这两个js文件我们就可以使用了，新建indexCommonJS.html，内容如下：

<!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>indexCommonJS</title>
    <script src="./commonJS/server.js"></script>
</head>
<body>
    
</body>
</html>

也可以使用node启动，如图：

2.requireJs方式

1）首先创建三个js文件 add.js、minus.js和main.js内容分别如下：

add.js:

const add = (x,y) => x+y;

define([],function(){
    return add
})

minus.js:

const minus = (x,y) => x-y;

define([],function(){
    return minus
})

main.js:

require(["./requireJS/add.js","./requireJS/minus.js"],function(a,b){
    console.log(a(100,200));
    console.log(b(100,200));
})

2) 使用：创建一个HTML文件内容如下：

<!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>idnexRequire</title>
    <script 
    src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"
    data-main="./requireJS/main.js"
    ></script>

</head>
<body>
    
</body>
</html>

在浏览器中打开效果如下图：

3. esm方式

1）创建 add.js 和 minus.js,内容如下：

add.js:

const add = (x,y)=>x+y;

export default add

minus.js

const minus = (x,y)=>x-y

export default minus

2) 使用方式如下，创建一个HTML文件，在script标签中用import方式引入：

<!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>indexEsm</title>
    <script type="module">
        import add from "./esm/add.js"
        import minus from "./esm/minus.js"

        console.log(add(10000,20000))
        console.log(minus(10000,20000))
    </script>
</head>
<body>
    
</body>
</html>

注意：不能直接在浏览器中打开需要启动http服务, 在集成终端中输入 npx http-server (npx命令需安装webpack，webpack通过npm安装，安装nodejs会自动安装npm)

启动后打开页面结果如图：