Skip to content

Latest commit

 

History

History
524 lines (415 loc) · 11 KB

02-05.md

File metadata and controls

524 lines (415 loc) · 11 KB

UMD 模块类型编译

前言

UMD，是通用定义模块 (Universal Module Definition)，是JavaScript前后端跨平台的模块化方案。

  • 1 如果是有全局 define 方法，就封装成 AMD 模块
  • 2 如果是有全局 exports 方法，就封装成 CommonJS 模块
  • 3 如果都不是以上模块环境，就封装成 IIFE 模块

具体模块样例如下

// if the module has no dependencies, the above pattern can be simplified to
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define([], factory);
    } else if (typeof exports === 'object') {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.returnExports = factory();
  }
}(this, function () {

    // Just return a value to define the module export.
    // This example returns an object, but the module
    // can return a function as the exported value.
    return {};
}));

实现例子

  • 编译

demo例子

https://github.com/chenshenhai/rollupjs-note/blob/master/demo/chapter-02-02-05/

npm i

## 开发模式
npm run dev

## 生产模式
npm run build

实现步骤

步骤1: 目录和准备

.
├── build # rollup.js 编译脚本目录
│   ├── rollup.config.dev.js
│   ├── rollup.config.js
│   └── rollup.config.prod.js
├── dist # 编译结果目录
│   ├── index.umd.js
│   └── index.umd.js.map
├── example # 例子
│   ├── amd
│   │   ├── index.html
│   │   ├── index.js
│   │   └── main.js
│   ├── cjs
│   │   └── index.js
│   └── iife
│       └── index.html
├── package.json
└── src # 待编译源代码目录
    ├── index.js
    └── lib
        └── demo.js

安装对应编译的npm模块

## 安装 rollup.js 基础模块
npm i --save-dev rollup 

## 安装 rollup.js 编译本地开发服务插件
npm i --save-dev rollup-plugin-serve

## 安装 rollup.js 编译代码混淆插件
npm i --save-dev rollup-plugin-uglify

## 安装 rollup.js 编译ES6+的 babel 模块
npm i --save-dev @rollup/plugin-babel @babel/core @babel/preset-env

步骤2: rollup配置

  • 编译基本配置 ./build/rollup.config.js
const path = require('path'); 
const { babel } = require('@rollup/plugin-babel');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

const babelOptions = {
  "presets": ['@babel/preset-env'],
}

module.exports = [
  {
    input: resolveFile('src/index.js'),
    output: {
      file: resolveFile('dist/index.umd.js'),
      format: 'umd', 
      name: 'Demo',
      amd: {
        id: 'lib/demo'
      },
    }, 
    plugins: [
      babel(babelOptions),
    ],
  },

]
  • 开发模式配置基本 ./build/rollup.config.dev.js
const path = require('path');
const serve = require('rollup-plugin-serve');
const configList = require('./rollup.config');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}
const PORT = 3000;


configList.map((config, index) => {

  config.output.sourcemap = true;

  if( index === 0 ) {
    config.plugins = [
      ...config.plugins,
      ...[
        serve({
          port: PORT,
          contentBase: [resolveFile('')]
        })
      ]
    ]
  }
  
  return config;
})


module.exports = configList;
  • 生产模式配置基本 ./build/rollup.config.prod.js
const { uglify } = require('rollup-plugin-uglify');
const configList = require('./rollup.config');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

configList.map((config, index) => {

  config.output.sourcemap = false;
  config.plugins = [
    ...config.plugins,
    ...[
      uglify()
    ]
  ]

  return config;
})

module.exports = configList;
  • 在./package.json配置编译执行脚本
{
  "scripts": {
    "build": "node_modules/.bin/rollup -c ./build/rollup.config.prod.js",
    "dev": "node_modules/.bin/rollup -w -c ./build/rollup.config.dev.js"
  },
}

步骤3: 待编译ES6源码

  • 源码 ./src/index.js
import demo from './lib/demo';

export default {
  init() {
    const arr1 = [1,2,3];
    const arr2 = [4,5,6];
    console.log([...arr1, ...arr2]);

    async function initDemo () {
      let data = await demo();
      console.log(data);
    }

    initDemo();
  }
}
  • 源码 ./src/lib/demo.js
function demo() {
  return new Promise((resolve, reject) => {
    try {
      setTimeout(()=>{
        const obj1 = {a:1};
        const obj2 = {b:2};
        const obj3 = {c:3};
        const obj4 = {d:4};
        const result = {...obj1, ...obj2, ...obj3, ...obj4};
        resolve(result);
      }, 1000)
    } catch (err) {
      reject(err);
    }
  })
}

export default demo;

步骤4: 编译结果

  • 在项目目录下执行 生产模式 npm run dev
  • 编译结果在目录 ./dist/ 下
  • 编译成ES5结果为 ./dist/index.umd.js
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define('lib/demo', factory) :
  (global = global || self, global.Demo = factory());
}(this, (function () { 'use strict';

  function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
    try {
      var info = gen[key](arg);
      var value = info.value;
    } catch (error) {
      reject(error);
      return;
    }

    if (info.done) {
      resolve(value);
    } else {
      Promise.resolve(value).then(_next, _throw);
    }
  }

  function _asyncToGenerator(fn) {
    return function () {
      var self = this,
          args = arguments;
      return new Promise(function (resolve, reject) {
        var gen = fn.apply(self, args);

        function _next(value) {
          asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
        }

        function _throw(err) {
          asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
        }

        _next(undefined);
      });
    };
  }

  function _defineProperty(obj, key, value) {
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      });
    } else {
      obj[key] = value;
    }

    return obj;
  }

  function ownKeys(object, enumerableOnly) {
    var keys = Object.keys(object);

    if (Object.getOwnPropertySymbols) {
      var symbols = Object.getOwnPropertySymbols(object);
      if (enumerableOnly) symbols = symbols.filter(function (sym) {
        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
      });
      keys.push.apply(keys, symbols);
    }

    return keys;
  }

  function _objectSpread2(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i] != null ? arguments[i] : {};

      if (i % 2) {
        ownKeys(Object(source), true).forEach(function (key) {
          _defineProperty(target, key, source[key]);
        });
      } else if (Object.getOwnPropertyDescriptors) {
        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
      } else {
        ownKeys(Object(source)).forEach(function (key) {
          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
        });
      }
    }

    return target;
  }

  function demo() {
    return new Promise(function (resolve, reject) {
      try {
        setTimeout(function () {
          var obj1 = {
            a: 1
          };
          var obj2 = {
            b: 2
          };
          var obj3 = {
            c: 3
          };
          var obj4 = {
            d: 4
          };

          var result = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, obj1), obj2), obj3), obj4);

          resolve(result);
        }, 1000);
      } catch (err) {
        reject(err);
      }
    });
  }

  var index = {
    init: function init() {
      var arr1 = [1, 2, 3];
      var arr2 = [4, 5, 6];
      console.log([].concat(arr1, arr2));

      function initDemo() {
        return _initDemo.apply(this, arguments);
      }

      function _initDemo() {
        _initDemo = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
          var data;
          return regeneratorRuntime.wrap(function _callee$(_context) {
            while (1) {
              switch (_context.prev = _context.next) {
                case 0:
                  _context.next = 2;
                  return demo();

                case 2:
                  data = _context.sent;
                  console.log(data);

                case 4:
                case "end":
                  return _context.stop();
              }
            }
          }, _callee);
        }));
        return _initDemo.apply(this, arguments);
      }

      initDemo();
    }
  };

  return index;

})));
//# sourceMappingURL=index.umd.js.map

步骤5: 浏览器查看结果

查看AMD 效果

  • example页面 ./example/amd/index.html
<html>
  <head>
    <script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.js"></script>
    <script data-main="main" src="https://cdn.bootcss.com/require.js/2.3.5/require.js"></script>
  </head>
  <body>
    <p>hello world</p> 
  </body>
</html>
  • exmaple中AMD模块入口文件 ./example/amd/main.js
requirejs.config({
  baseUrl: '/', 
  paths: {
    'lib/demo': '/dist/index.umd',
  }
});

requirejs(['example/amd/index']);
  • exmaple中AMD模块应用执行模块文件 ./example/amd/main.js
define(function (require) {
  var demo = require('lib/demo');
  demo.init()
});
[1, 2, 3, 4, 5, 6]
{a: 1, b: 2, c: 3, d: 4}
>

查看 IIFE 效果

  • example页面./example/iife/index.html
<html>
  <head>
    <script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.js"></script>
  </head>
  <body>
    <p>hello world</p> 
    <script src="./../../dist/index.umd.js"></script>
    <script>
      window.Demo.init();
    </script>
  </body>
</html>
[1, 2, 3, 4, 5, 6]
{a: 1, b: 2, c: 3, d: 4}
>

查看 CommonJS 效果

  • example脚本 ./example/cjs/index.js
require('@babel/polyfill')
const Demo = require('./../../dist/index.umd');

Demo.init();
  • 执行一下脚本
node ./example/cjs/index.js

会出现以下结果

[1, 2, 3, 4, 5, 6]
{a: 1, b: 2, c: 3, d: 4}
>