【ES6】export default和import、module.exports和require()使用简析

末蓝、 2022-05-19 00:58 290阅读 0赞

ES6标准发布后，module成为标准，标准的使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。

**es6模块化：**export default和import （vue中使用的是这种规范，运行在浏览器端）

**commonJS模块化(node):**moudle.exports 和require（node后端使用）

# **export default和import** #

**案例一**

写一个Student.js文件

export default class Student{
        constructor(name,id){
            this.name = name
            this.id = id
        }
    }

写一个app.js文件

import student from "./test.js"
    
    var st1 = new student("fdfdfd ","111")
    console.log(st1.name);
    console.log(st1.id);

如果直接在编辑器使用点击运行是不行的，因为这是es6的模块化语法，node的模块化语法是module.exports和require

这里运行方式有两种

一：新建html文件引用app.js，type="module"，是浏览器es6模块化方式

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    </body>
    </html>
    <script src="./app.js" type="module"></script>

二：使用babel转化，一般在webpack中使用，

在webpack中打开使用devtool;"eval"，方便看到转化代码，下面是webpack.conf.js代码，使用运行webpack打包,使用了babel-loader

const path = require('path');
    
    module.exports = {
        entry: './src/app.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        devtool:'eval',
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                ['@babel/preset-env',{
                                targets:{
                                    browsers:['last 2 versions']
                                }
                                }]
                            ]
                        }
                    },
                    exclude: '/node_modules/'
                }
            ]
        }
    };

在index.html中引入打包后的dist/bundle.js 即可

**案例二：**

先写一个**a.js**使用export default导出一个模块

//a.js
    export default {
       init:function(){
         this.handleAddListener('load',function () {
             console.log("页面加载了。。")
         })
       },
        handleAddListener: function (type, fn) {
            if (window.addEventListener) {
                window.addEventListener(type, fn)
            } else {
                window.attachEvent('on' + type, fn)
            }
        }
    }

在**b.js**中导入a.js

//b.js
    import aabb from './a.js'
    aabb.init()

然后使用在通过b.html中引入**b.js，type='module'表示浏览器用es6解析**

//b.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    </html>
    
    <script type="module">
    import './b'
    </script>

![70][]

如果在c.html中直接引入a.js，并且type="module"也可以打印结果

//c.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    </html>
    
    <script type="module">
        import as from './a.js'
        as.init();
    </script>

![70][]

# **moudle.exports 和require** #

**创建文件student.js**

module.exports = function (name, id) {
        return name+id
    }

文件app.js

var st1 = require("./student")
    console.log(st1("zhangsan", '001'));

这是commonJS规范，运行在node服务端，node支持这种语法，所以可以点击运行直接执行。

**补充：**

Webpack支持:

AMD(RequireJS)

ES Modules

CommonJS