JS模块化规范

1,752 阅读2分钟

JS模块化规范

1.CommJS

  • npm init 生成package.json文件

1.png

2.png

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

3.png

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

4.png

5.png

6.png

7.png

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

8.png

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

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

  • 全局安装
npm installl browserify -g
  • 局部安装
npm install browserify --save-dev

9.png

devDependencies 和 dependencies不一样 一个是开发依赖包,一个是运行依赖包

  • 在浏览器端运行时会提示 require is not defined 此时需要browserify来进行打包

    // 打包文件路径 输出文件路径   bundle打包的意思
    browserify js/src/app.js -o js/dist/bundle.js
    
  • 最终index页面引入的实际上是打包好的bundle.js文件

2.AMD (异步加载)

  • 定义暴露模块

    • 定义没有依赖的模块
    define(function(){
    	return 模块
    })
    
    • 定义有依赖的模块 显示声明依赖注入
    define(['module1','module2'],function(m1,m2)) {
    	return 模块
    })
    
  • 实例 (不用AMD语法)

10.png

11.png

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

12.png

  • 使用AMD语法

13.png

14.png

15.png

16.png

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

17.png

18.png

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

19.png

20.png

  • 定义没有依赖的模块
define(function(require,exports,module){
  let msg = 'module2'
  function bar() {
    console.log(msg);
  }
  module.exports = bar
})
  • 定义有依赖的模块
define(function(require,exports,module){
  let msg = 'module4'
  // 同步引入
  let module2 = require('./module2')
  module2()
  // 异步引入
  require.async('./module3',function(m3) {
    m3.module3.fun()
  })
  function fun2() {
    console.log(msg);
  }
  exports.fun2 = fun2
})
  • 在浏览器使用

    <script type='text/javascript' src="./node_modules/sea.js/sea.js"></script>
    <script type='text/javascript'>
    	seajs.use('./modules/main.js')
    </script>
    

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文件

21.png

  • 暴露模块方式(常规暴露)

    • 分别暴露

22.png

  • 统一暴露

23.png

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

//引入 名字任意取
import myFun from './module3'
  • 引入其他模块 (对象解构赋值)

24.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…