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

末蓝、 2022-05-19 00:58 387阅读 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文件

  1. export default class Student{
  2.     constructor(name,id){
  3.         this.name = name
  4.         this.id = id
  5.     }
  6. }

写一个app.js文件

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

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

这里运行方式有两种

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
  10. <script src="./app.js" type="module"></script>

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

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

  1. const path = require('path');
  3. module.exports = {
  4.     entry: './src/app.js',
  5.     output: {
  6.         path: path.resolve(__dirname, 'dist'),
  7.         filename: 'bundle.js'
  8.     },
  9.     devtool:'eval',
  10.     module: {
  11.         rules: [
  12.             {
  13.                 test: /\.js$/,
  14.                 use: {
  15.                     loader: 'babel-loader',
  16.                     options: {
  17.                         presets: [
  18.                             ['@babel/preset-env',{
  19.                             targets:{
  20.                                 browsers:['last 2 versions']
  21.                             }
  22.                             }]
  23.                         ]
  24.                     }
  25.                 },
  26.                 exclude: '/node_modules/'
  27.             }
  28.         ]
  29.     }
  30. };

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

案例二：

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

  1. //a.js
  2. export default {
  3.    init:function(){
  4.      this.handleAddListener('load',function () {
  5.          console.log("页面加载了。。")
  6.      })
  7.    },
  8.     handleAddListener: function (type, fn) {
  9.         if (window.addEventListener) {
  10.             window.addEventListener(type, fn)
  11.         } else {
  12.             window.attachEvent('on' + type, fn)
  13.         }
  14.     }
  15. }

在b.js中导入a.js

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

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

  1. //b.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  7. </head>
  8. <body>
  10. </body>
  11. </html>
  13. <script type="module">
  14. import './b'
  15. </script>

70

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

  1. //c.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  7. </head>
  8. <body>
  10. </body>
  11. </html>
  13. <script type="module">
  14.     import as from './a.js'
  15.     as.init();
  16. </script>

70

moudle.exports 和require

创建文件student.js

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

文件app.js

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

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

补充：

Webpack支持:

AMD(RequireJS)

ES Modules

CommonJS

现在在都在往ESM（es6模块化）方向发展

发表评论

表情：
评论列表 （有 0 条评论，387人围观）

还没有评论，来说两句吧...

相关阅读