js 模块化

1.Common.js

同步加载模块

• 服务器端依赖于node
• 浏览器端则需运用插件browserify
  • 使用方法

        #先全局安装
        npm i browserify -g
        #在项目中进行安装
        npm i browserify --save-dev
        #使用:将目标文件编译并输出到制定的文件
        browserify source.js -o build.js
        #如果要监听文件并编译，则需安装插件watchify,用法和browserify一样
        watchify source.js -o build.js
    

2.AMD(Require.js)

异步加载模块

• 定义模块

  //其语法与angularJS相似
  
      define([依赖模块], function () {
        return 模块
      })
  
  //如果定义的模块直接返回某个数据类型，可简写如：返回对象
  define({
      name: 'cicades',
      age: 20
      })
  

• 加载模块

      require([注入的模块], function(模块参数) {
        //TODO：
      })
  

• 配置入口点

    requirejs.config({
        baseUrl: 'js/lib', //设置所有模块查找的根路径
        paths: {
            app: '../app' //映射要加载模块，注意路径中不要带扩展名，因为RequireJS会自动加上
        }
    });
  

• 在html页面引用（data-main入口点）

    <script data-main="js/app.js" src="js/require.js"></script>
  

3.CMD(Sea.js)

吸收Common.js和Require.js的特性,定义模块与Require.js相似，暴露模块与Common.js相似;
支持同步加载和异步加载

4.ES6模块化

需配合browserify（加载模块）和babel（将es6语法转化为es5, 并使用Common.js）使用；

• 环境配置

  • 工具安装

  //安装babel-cli (command line interface)
  npm i babel-cli -g
  
  //安装babel-preset-es2015(项目依赖)
  npm i babel-preset-es2015 --save-dev
  

  • 添加.babelrc (babel run command)文件,并写入以下内容

      {
        "presets": ["es2015"]
      }
    

  • 使用方法

    #先将js文件转换为es5语法
    babel inputdir -d outputdir
    
    #使用broserify加载模块
    browserify source.js -o bulid.js
    

• 基本语法

    //导入模块；需要配合变量结构接受模块导出的变量
    import {var1, var2} from path
  
    //导入第三包时，路径直接写包名即可,其规则模块规则与Common.js一样
    import $ from 'jquery'
  
    //暴露模块;使用export关键字暴露数据
    export data
  
    //默认暴露，相当于module.exports = value
    export default value