1. 程式人生 > 實用技巧 >vue-cli lib模式打包umd分析

vue-cli lib模式打包umd分析

這裡分析的是打包後生成的.umd.js檔案

  • 最外部立即執行函式
(webpackUniversalModuleDefinition(root, factory){})()
//立即執行引數一
root->(typeof self !== 'undefined' ? self : this)
//立即執行引數二 factory引數中也是一個立即執行的匿名函式,引數為大量的模組key為模組名,value為具體模組內部
factory->function(__WEBPACK_EXTERNAL_MODULE__8bbf__){(function(modules){})({key:value,key:value,key:value......})}
  • webpackUniversalModuleDefinition方法體

if(typeof exports === 'object' && typeof module === 'object')
//node
module.exports = factory(require("vue"));
else if(typeof define === 'function' && define.amd)
//AMD規範
define([], factory);
else if(typeof exports === 'object')
//commonJS規範

exports["netovue"] = factory(require("vue"));
else
//瀏覽器全域性
root["netovue"] = factory(root["Vue"]);

  • factory的執行
    return /******/ (function(modules) { 
    /******/    // webpackBootstrap
    /******/     // 快取載入的模組
    /******/     var installedModules = {};
    /******/
    /******/     // 獲取指定id的模組
    /******/     function __webpack_require__(moduleId) {
    
    /******/ /******/ // 檢查模組是否已經載入過 /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // 新建一個模組 (放入快取) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // 呼叫模組自己的立即執行方法(通過call呼叫使其方法內的this指向module.exports) /******/ // 這裡的引數傳入了__webpack_require__其中包含了一些公用方法 /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // 標記模組已經載入 /******/ module.l = true; /******/ /******/ // 返回目標模組 /******/ return module.exports; /******/ } /******/ //定義了一些公用的載入方法(獲取已經載入的快取、暴露的模組...) /******/ //返回載入的入口模組 /******/ return __webpack_require__(__webpack_require__.s = "fb15"); /******/ })