JS模块化规范

1.CommJS

  • npm init 生成package.json文件

image.png
image.png

  • 高版本的nodejs自动将包名转成了小写

image.png

  • npm install uniq —save
    • 添加该依赖到package.json中，在npm版本5以上默认—save
  • 暴露出模块中的方法或者属性

image.png
image.png
image.png
image.png

  • 通过node app.js可以运行该文件看到结果（服务器端实现）

image.png

  • 引入第三方库
  1. const uniq  = require('uniq')
  2. // 有个小问题，调用uniq函数返回的结果按数字第一位编码进行排序 
  3. 复制代码

Browserify模块化使用教程（CommJS的浏览器端打包工具）

  • 全局安装

    1. npm installl browserify -g
    2. 复制代码

  • 局部安装

    1. npm install browserify --save-dev
    2. 复制代码

image.png
devDependencies 和 dependencies不一样 一个是开发依赖包，一个是运行依赖包

  • 在浏览器端运行时会提示 require is not defined 此时需要browserify来进行打包 
    1. // 打包文件路径 输出文件路径   bundle打包的意思
    2. browserify js/src/app.js -o js/dist/bundle.js
    3. 复制代码
  • 最终index页面引入的实际上是打包好的bundle.js文件

2.AMD (异步加载)

  • 定义暴露模块

    • 定义没有依赖的模块

      1. define(function(){
      2. return 模块
      3. })
      4. 复制代码

    • 定义有依赖的模块 显示声明依赖注入

      1. define(['module1','module2'],function(m1,m2)) {
      2. return 模块
      3. })
      4. 复制代码

  • 实例 (不用AMD语法)

image.png
image.png

  • 模块A依赖模块B，在app.js中调用模块A，则需要先引入模块B再依次引入模块A，最后引入app.js

image.png

  • 使用AMD语法

image.png
image.png
image.png
image.png

  • jquery遇到amd语法时暴露的是小写的模块名

image.png
image.png

3.CMD (定义AMD，暴露CommonJS)

image.png
image.png

  • 定义没有依赖的模块
  1. define(function(require,exports,module){
  2.   let msg = 'module2'
  3.   function bar() {
  4.     console.log(msg);
  5.   }
  6.   module.exports = bar
  7. })
  8. 复制代码
  • 定义有依赖的模块
  1. define(function(require,exports,module){
  2.   let msg = 'module4'
  3.   // 同步引入
  4.   let module2 = require('./module2')
  5.   module2()
  6.   // 异步引入
  7.   require.async('./module3',function(m3) {
  8.     m3.module3.fun()
  9.   })
  10.   function fun2() {
  11.     console.log(msg);
  12.   }
  13.   exports.fun2 = fun2
  14. })
  15. 复制代码
  • 在浏览器使用 
    1. <script type='text/javascript' src="./node_modules/sea.js/sea.js"></script>
    2. <script type='text/javascript'>
    3.  seajs.use('./modules/main.js')
    4. </script>
    5. 复制代码

4.ES6-Babel-Browserify

  • 安装babel-cli
npm install babel-cli -g
复制代码
  • 安装babel-preset-es2015
npm install babel-preset-es2015 --save-dev
npm install babel-preset-env
复制代码
  • 定义.babelrc文件

image.png

  • 暴露模块方式（常规暴露）
    • 分别暴露

image.png

  • 统一暴露

image.png

  • 默认暴露（可以暴露任意数据类型，暴露什么数据接收到的就是什么数据
// 默认暴露
export default ()=>{
  console.log('箭头函数');
}

//引入 名字任意取
import myFun from './module3'
复制代码
  • 引入其他模块 （对象解构赋值）

image.png

  • 使用babel将ES6编译为ES5代码（包含CommonJS语法）
babel js/src -d js/build
复制代码
  • 使用browserify对文件进行编译打包 （不会自动生成文件夹，需要手动创建）
browserify js/build/main.js -o js/dist/bundle.js
复制代码

对应练习代码地址：gitee.com/Lee_sparkli…

https://juejin.cn/tag/JavaScript)