js非模块改模块化

js模块 js 模块

在 ES6 模块中

import MyPlugin from './myPlugin.js';

const pluginInstance = new MyPlugin();
pluginInstance.doSomething();

在 CommonJS 中

const MyPlugin = require('./myPlugin.js');

const pluginInstance = new MyPlugin();
pluginInstance.doSomething();

在 AMD 中

require(['myPlugin'], function (MyPlugin) {
  const pluginInstance = new MyPlugin();
  pluginInstance.doSomething();
});

在浏览器中

<script src="path/to/myPlugin.js"></script>
<script>
  const pluginInstance = new MyPlugin();
  pluginInstance.doSomething();
</script>

为了支持以上全部方式加载，封装成 umd模式

// myPlugin.js

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS
    module.exports = factory();
  } else {
    // 全局变量
    root.MyPlugin = factory();
  }
}(typeof self !== 'undefined' ? self : this, function () {
  
  var MyPlugin = {}

  return MyPlugin; //最后一定要return
}));

记住坑：

1，保证全局模式你的插件名不冲突

2，在AMD 或 CommonJS 环境中，保证你的依赖插件都已经加载