模块化开发Demo

CommonJS

exports = {}

require('mymodule')
  • commonjs/math.js
  • commonjs/increment.js
  • commonjs/program.js
  • node ~/code/markbuild/h/comps/module/commonjs/program.js

    • AMD

    define(id?, dependencies?, factory);
  • amd/script/math.js
  • amd/script/increment.js
  • amd/script/program.js
  • RequireJS Demo

    • CMD

    define(function(require, exports, modules) {
  mymodule = require('mymodule')
  modules.exports = 
})
  • cmd/script/math.js
  • cmd/script/increment.js
  • cmd/script/program.js
  • Sea.js Demo

    • UMD

  • umd/script/math.js
  • umd/script/increment.js
  • umd/script/program.js
  • 非模块化引用UMD组件
  • node ~/code/markbuild/h/comps/module/umd/script/program.js
  • RequireJS 引用UMD组件
  • Sea.js 引用UMD组件

    • ES6 Module

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules

    export { func }

import mymodule from './mymodule.js'
mymodule.func
  • es6module/script/math.js
  • es6module/script/increment.js
  • es6module/script/program.js
  • ES6 Module Demo(本地调试会出现跨域限制)
  • 项目的package.json文件中，指定 type 字段为 module(默认值为commonjs)，否则 node 按 CommonJS 模块加载导致错误
  • node ~/code/markbuild/h/comps/module/es6module/script/program.js
  • 命名为 .mjs 则可以按 ES6 方式而非 CommonJS 方式加载
  • node ~/code/markbuild/h/comps/module/es6module/program.mjs

    • Blog

    前端组件化、模块化、工程化整理
    SINCE 2023 © markbuild