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

最新推荐文章于 2024-06-24 23:27:48 发布

劲枫

最新推荐文章于 2024-06-24 23:27:48 发布

阅读量6.7k

点赞数 2

分类专栏： ES6相关文章标签： export default es6 import

本文链接：https://blog.csdn.net/TCF_JingFeng/article/details/81098156

版权

ES6相关专栏收录该内容

10 篇文章 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>

如果在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>

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模块化）方向发展

劲枫

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
【ES6】export default和import、module.exports和require()使用简析

ES6标准发布后，module成为标准，标准的使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。es6模块化：export default和import （vue中使用的是这种规范，运行在浏览器端）commonJS模块化(node):moudle....
复制链接

扫一扫

专栏目录