webpack简易的实现

webpack是前端的一种打包工具,可以把所有的资源(图片，css，js)打包成js。

模块式是把一个复杂的系统分解成多个模块方便统一管理

命名空间已经满足不了现今的前端开发项目管理的需求

- 命名空间可能会冲突，多个库可能会出现相同的命名空间

- 无法合理的管理项目依赖和版本

- 无法方便的控制依赖的加载顺序

模块化的几种方式

1. commonJS规范

主要在nodejs体现的明显,是一种服务器端的模块化规范，核心思想是通过'require'方法来同步的加载依赖的其他模块，通过module.exports导出需要暴露的接口

用法

//导入
const moduleA = require('./moduleA');

//导出
module.exports = '.......'

//commonjs 的简易实现
let fs = require('fs');

function req (moduleName) {
  //content 代表的是内容
  let content = fs.readFileSync(moduleName, 'utf8');
  console.log(content);
  //最后一个参数是函数体
  let fn = new Function('exports', 'module', 'require', '__dirname', '__filename', content + '\n return module.exports')
  let module = {
    exports: {},
  }
  return fn(module.exports, module, req, __dirname, __filename);

  /* 
    function fn(exports,module,require,__dirname,__filename){
      module.exports = '这是一个模块的内容';
      return module.exports
    }
  
  */
}

2.AMD模块规范

也是一种js模块规范，与Commonjs最大的区别是它采用的是异步的方式去加载依赖的模块。AMD规范主要是为了解决针对浏览器端的模块化问题，主要的代表是requirejs。

优点:

- 可以在不转化代码的情况下，直接在浏览器端执行

- 可以加载多个依赖

-代码可以运行在浏览器环境和nodejs环境下

//define声明模块，通过require使用一个模块
let factories = {};
//参数-> 模块的名字,依赖,工厂函数
function define (moduleName, dependencies, factory) {
  factory.dependencies = dependencies; //将依赖记到factory 上
  factories[moduleName] = factory;
}

function require (mods, callback) {
  let result = mods.map(function (mod) {  //name,age
    let factory = factories[mod];
    let exports;
    let dependencies = factory.dependencies;
    require(dependencies, function () {
      exports = factory.apply(null, arguments)
    })
    return exports;
  })

  callback.apply(null, result)
}

define('name', [], function (require, factory) {
  return "小明"
});

define('age', ['name'], function (name) {
  return name + 30;
});

require(['name', 'age'], function (name, age) {
  console.log(name, age)
})

3.es6模块化