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

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模块化方式




    
    Title





二:使用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



    
    Title






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

//c.html



    
    Title






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

现在在都在往ESM(es6模块化)方向发展

你可能感兴趣的:(ES6相关)