模块化

模块化

CommonJS规范

每个文件就是一个模块，有自己的作用域。

在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

exports和require

1. 被引入的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
   }
   
   //导出
   module.exports = {
       sum,
       subtract,
       multiply,
       divide
   }
   

2. 引入的js文件

   //引入模块
   const m = require('./ff.js')
   
   console.log(m)
   console.log(m.sum(1,2),m.subtract(1,2))
   
   //然后执行（node xx.js）
   

ES6规范

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

1. 导出模块

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

2. 导入模块

   import { getList, save } from './userApi.js'
   getList()
   save()
   

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

默认不支持es6语法的import

所以用Babel

3. 初始化项目npm init -y

4. 配置 .babelrc

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

5. 安装转码器，在项目中安装npm install --save-dev babel-preset-es2015

6. 执行命令babel src -d dist

7. 运行程序node userComponent.js