前端模块化开发

CommonJS规范

CommonJS使用 exports 和require 来导出、导入模块

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的对其他文件不可见。

1. 创建“module”文件夹

2. 创建 mokuai-common-js/四则运算.js

   // 定义成员：
   const sum = function (a, b) {
       return a + b
   }
   const subtract = function (a, b) {
       return a - b
   }
   const multiply = function (a, b) {
       return a * b
   }
   const divide = function (a, b) {
       return a / b
   }
   

3. 导出模块中的成员

   // 导出成员：
   module.exports = {
       sum: sum,
       subtract: subtract,
       multiply: multiply,
       divide: divide
   }
   //简写
   module.exports = {
       sum,
       subtract,
       multiply,
       divide
   }
   

4. 创建 mokuai-common-js/引入模块.js

   //引入模块，注意：当前路径必须写 ./
   const m = require('./四则运算.js')
   console.log(m)
   const r1 = m.sum(1,2)
   const r2 = m.subtract(1,2)
   console.log(r1,r2)
   

5. 运行程序

   node 引入模块.js
   

   

ES6模块化规范

ES6使用 export 和 import 来导出、导入模块

1. 创建 mokuai-es6 文件夹

2. 创建 src/userApi.js 文件，导出模块

   export function getList() {
       console.log('获取数据列表')
   }
   export function save() {
       console.log('保存数据')
   }
   

3. 创建 src/userComponent.js文件，导入模块

   //只取需要的方法即可，多个方法用逗号分隔
   import { getList, save } from './userApi.js'
   getList()
   save()
   

   注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5
   后再执行

4. 初始化项目

   npm init -y
   

5. 配置 .babelrc

   {
       "presets": [
           "es2015"
       ],
       "plugins": []
   }
   

6. 安装转码器，在项目中安装

   npm install --save-dev babel-preset-es2015
   

7. 定义运行脚本，package.json中增加"build"

   

8. 执行命令转码

   npm run build
   

   

9. 运行程序

   node dist/userComponent.js
   

   

ES6模块化写法2

1. 创建 src/userApi2.js ，导出模块

   export default {
       getList() {
           console.log('获取数据列表2')
       },
       save() {
           console.log('保存数据2')
       }
   }
   

2. 创建 src/userComponent2.js，导入模块

   import user from "./userApi2.js"
   user.getList()
   user.save()
   

3. 执行命令转码

   npm run build
   

4. 运行程序

   node dist/userComponent2.js