UMD 模块 vs CJS 模块

使用方式

UMD, window 全局注册后，直接使用


  2. <!DOCTYPE html>
  3. <html lang="zh-Hans">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <meta name="author" content="xgqfrms">
  9.     <meta name="generator" content="VS code">
  10.     <title>xyz demo 2</title>
  11.     <!-- 引入样式 -->
  12.     <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
  13.     <link rel="stylesheet" href="./xyz.css">
  14. </head>
  15. <body>
  16.     <main>
  17.       <div id="vue_app">
  18.         <section>
  19.           <xyz-hello :msg="author"></xyz-hello>
  20.           <xyz-message :msg="msg"></xyz-message>
  21.           <!-- <br />
  22.           <Hello :msg="author"></Hello>
  23.           <Message :msg="msg"></Message> -->
  24.               <!-- element-ui -->
  25.           <el-row>
  26.             <el-button>默认按钮</el-button>
  27.             <el-button type="primary">主要按钮</el-button>
  28.             <el-button type="success">成功按钮</el-button>
  29.             <el-button type="info">信息按钮</el-button>
  30.             <el-button type="warning">警告按钮</el-button>
  31.             <el-button type="danger">危险按钮</el-button>
  32.           </el-row>
  33.           <!-- xyz-ui -->
  34.           <el-row>
  35.             <xyz-hello :msg="author"></xyz-hello>
  36.             <xyz-message :msg="msg"></xyz-message>
  37.           </el-row>
  38.         </section>
  39.       </div>
  40.     <main>
  41.     <!-- 引入组件库 -->
  42.     <script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
  43.     <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
  44.     <!-- <script src="./xyz.umd.js"></script> -->
  45.     <script src="./xyz.umd.min.js"></script>
  46.     <script>
  47.       console.log(`xyz =`, xyz);
  48.       console.log(`xyz.default[0] =`, xyz, xyz.default[0]);
  49.       console.log(`xyz.default[1] =`, xyz, xyz.default[1]);
  50.       var vm = new Vue({
  51.         el: '#vue_app',
  52.         // vm === data
  53.         data: {
  54.             msg: "vue ui lib ",
  55.             author: "xgqfrms",
  56.         },
  57.         component: {
  58.           // xyz 模块，引用方式
  59.           // Hello: xyz.default[0],
  60.           // Message: xyz.default[1],
  61.         },
  62.       });
  63.       setTimeout(() => {
  64.         let div = document.querySelector("#vue_app");
  65.         div.style.display = "block";
  66.       }, 0);
  67.     </script>
  68. </body>
  69. </html>

CJS


  2. import Vue from "vue";
  3. import App from "./App.vue";
  4. import router from "./router";
  5. import store from "./store";
  7. import ElementUI from "element-ui";
  8. import "element-ui/lib/theme-chalk/index.css";
  10. // 全局导入
  11. import XYZ from "../lib/xyz.common";
  12. import '../lib/xyz.css';
  14. Vue.use(ElementUI);
  15. Vue.use(XYZ);
  17. Vue.config.productionTip = false;
  19. new Vue({
  20.   router,
  21.   store,
  22.   render: h => h(App)
  23. }).$mount("#app");

npm package


  2. import Vue from "vue";
  3. import App from "./App.vue";
  4. import router from "./router";
  5. import store from "./store";
  7. import ElementUI from "element-ui";
  8. import "element-ui/lib/theme-chalk/index.css";
  10. // 全局导入, ??? src/index 全局注册入口
  11. import XYZ from "@xgqfrms/xyz/lib/xyz.common.js";
  12. import '@xgqfrms/xyz/lib/lib/xyz.css';
  14. Vue.use(ElementUI);
  15. Vue.use(XYZ);
  17. Vue.config.productionTip = false;
  19. new Vue({
  20.   router,
  21.   store,
  22.   render: h => h(App)
  23. }).$mount("#app");

src/index 全局注册入口

  1. /* Automatically generated by './build/bin/build-entry.js' */
  3. // 全局引入 ElementUI
  4. import Vue from 'vue';
  6. import ElementUI from 'element-ui';
  7. import 'element-ui/lib/theme-chalk/index.css';
  8. Vue.use(ElementUI);
  10. // 导入组件
  11. import Hello from './hello';
  12. import Message from './message';
  14. import * as PACKAGE from '../package.json';
  16. // 存储组件列表
  17. const components = [
  18.   Hello,
  19.   Message,
  20. ];
  22. // 定义 install 方法，接收 Vue 作为参数。
  23. // 如果使用 use 注册插件，则所有的组件都将被注册
  24. const install = function (Vue) {
  25.   // 判断是否安装
  26.   if (install.installed) return;
  27.   // 遍历注册全局组件
  28.   components.forEach(component => {
  29.     Vue.component(component.name, component);
  30.   });
  31.   // Vue.prototype 全局属性
  32.   // Vue.prototype.$message = DuiMessage;
  33. }
  35. // 判断是否是直接引入文件
  36. if (typeof window !== 'undefined' && window.Vue) {
  37.   install(window.Vue);
  38. }
  40. export default {
  41.   version: PACKAGE.version,
  42.   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  43.   install,
  44.   // 以下是具体的组件列表
  45.   ...components,
  46. };

脚本自动注册

build/bin/build-entry.js & components.json

  1. // 全局导入, ??? src/index 全局注册入口 
  3. -import XYZ from "@xgqfrms/xyz/lib/xyz.common.js";
  4. +import XYZ from "@xgqfrms/xyz";
  6. import '@xgqfrms/xyz/lib/lib/xyz.css';

提高易用性, 缩短导入路径名称


  2. var Components = require('../../components.json');
  4. var fs = require('fs');
  5. var render = require('json-templater/string');
  6. var uppercamelcase = require('uppercamelcase');
  7. var path = require('path');
  8. var endOfLine = require('os').EOL;
  10. var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
  11. var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
  12. var INSTALL_COMPONENT_TEMPLATE = '  {{name}}';
  14. var MAIN_TEMPLATE = `
  15. /* Automatically generated by './build/bin/build-entry.js' */
  17. {{include}}
  18. import locale from 'element-ui/src/locale';
  19. import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
  21. const components = [
  22.   {{install}},
  23.   CollapseTransition
  24. ];
  26. const install = function(Vue, opts = {}) {
  27.   locale.use(opts.locale);
  28.   locale.i18n(opts.i18n);
  29.   components.forEach(component => {
  30.     Vue.component(component.name, component);
  31.   });
  32.   Vue.use(InfiniteScroll);
  33.   Vue.use(Loading.directive);
  34.   Vue.prototype.$ELEMENT = {
  35.     size: opts.size || '',
  36.     zIndex: opts.zIndex || 2000
  37.   };
  38.   Vue.prototype.$loading = Loading.service;
  39.   Vue.prototype.$msgbox = MessageBox;
  40.   Vue.prototype.$alert = MessageBox.alert;
  41.   Vue.prototype.$confirm = MessageBox.confirm;
  42.   Vue.prototype.$prompt = MessageBox.prompt;
  43.   Vue.prototype.$notify = Notification;
  44.   Vue.prototype.$message = Message;
  45. };
  47. /* istanbul ignore if */
  48. if (typeof window !== 'undefined' && window.Vue) {
  49.   install(window.Vue);
  50. }
  52. export default {
  53.   version: '{{version}}',
  54.   locale: locale.use,
  55.   i18n: locale.i18n,
  56.   install,
  57.   CollapseTransition,
  58.   Loading,
  59.   {{list}}
  60. };
  61. `;
  63. delete Components.font;
  65. var ComponentNames = Object.keys(Components);
  67. var includeComponentTemplate = [];
  68. var installTemplate = [];
  69. var listTemplate = [];
  71. ComponentNames.forEach(name => {
  72.   var componentName = uppercamelcase(name);
  74.   includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
  75.     name: componentName,
  76.     package: name
  77.   }));
  79.   if (['Loading', 'MessageBox', 'Notification', 'Message', 'InfiniteScroll'].indexOf(componentName) === -1) {
  80.     installTemplate.push(render(INSTALL_COMPONENT_TEMPLATE, {
  81.       name: componentName,
  82.       component: name
  83.     }));
  84.   }
  86.   if (componentName !== 'Loading') listTemplate.push(`  ${componentName}`);
  87. });
  89. var template = render(MAIN_TEMPLATE, {
  90.   include: includeComponentTemplate.join(endOfLine),
  91.   install: installTemplate.join(',' + endOfLine),
  92.   version: process.env.VERSION || require('../../package.json').version,
  93.   list: listTemplate.join(',' + endOfLine)
  94. });
  96. fs.writeFileSync(OUTPUT_PATH, template);
  98. console.log('[build entry] DONE:', OUTPUT_PATH);

refs

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

UMD 模块 vs CJS 模块的更多相关文章

  1. python常用模块(模块和包的解释，time模块，sys模块，random模块，os模块，json和pickle序列化模块)

    1.1模块 什么是模块: 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文 ...

  2. Python模块之常用模块，反射以及正则表达式

    常用模块  1. OS模块 用于提供系统级别的操作,系统目录,文件,路径,环境变量等 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("di ...

  3. python基础知识8——模块1——自定义模块和第三方开源模块

    模块的认识 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需 ...

  4. Python引用模块和查找模块路径

    模块间相互独立相互引用是任何一种编程语言的基础能力.对于"模块"这个词在各种编程语言中或许是不同的,但我们可以简单认为一个程序文件是一个模块,文件里包含了类或者方法的定义.对于编译 ...

  5. threading模块和queue模块实现程序并发功能和消息队列

    简介: 通过三个例子熟悉一下python threading模块和queue模块实现程序并发功能和消息队列. 说明:以下实验基于python2.6 基本概念 什么是进程? 拥有独立的地址空间,内存,数 ...

  6. VBA标准模块与类模块

    大家通过之前的介绍,已知道怎么将一个空模块插入VBA的工程中.从插入模块中可以看到,模块有有两种——标准模块与类模块.类模块是含有类定义的特殊模块,包括其属性和方法的定义.在后面会有介绍与说明. 随着 ...

  7. ansible定时任务模块和用户组模块使用

    接上篇,还是一些基础模块的使用,这里主要介绍的是系统模块的使用. 下面例子都进行过相关的实践,从而可以直接进行使用相关的命令. 3.用户模块的使用 用户模块主要用来管理用户账号和用户的属性(对远程主机 ...

  8. ansible服务模块和组模块使用

    本篇文章主要是介绍ansible服务模块和组模块的使用. 主要模块为ansible service module和ansible group moudle,下面的内容均是通过实践得到,可以直接运行相关 ...

  9. python-Day5-深入正则表达式--冒泡排序-时间复杂度 --常用模块学习:自定义模块--random模块:随机验证码--time & datetime模块

    正则表达式   语法:             mport re #导入模块名 p = re.compile("^[0-9]") #生成要匹配的正则对象 , ^代表从开头匹配,[0 ...

随机推荐

  1. Python+Selenium+Unittest实现PO模式web自动化框架（1）

    1.什么是PO模式? PO是Page Object的缩写 PO模式是自动化测试项目开发实践的最佳设计模式之一,讲页面定位和业务操作分开,也就是把对象的定位和测试脚本分开,从而提供可维护性. 主要有以下 ...

  2. SELECT ... FOR UPDATE or SELECT ... FOR SHARE Locking Reads session

    小结: 1.注意使用限制 Locking reads are only possible when autocommit is disabled (either by beginning transa ...

  3. git branch --set-upstream-to=

    test@uat:/usr/server/app_server# git config --local -lcore.repositoryformatversion=0core.filemode=tr ...

  4. python基础（格式化输出、基本运算符、编码）

    1,格式化输出. 现有一练习需求,问用户的姓名.年龄.工作.爱好 ,然后打印成以下格式 ------------ info of Alex Li ----------- Name : Alex Li ...

  5. 《进击吧！Blazor！》第一章 3.页面制作

    作者介绍 陈超超Ant Design Blazor 项目贡献者拥有十多年从业经验,长期基于.Net技术栈进行架构与开发产品的工作,Ant Design Blazor 项目贡献者,现就职于正泰集团 写专 ...

  6. Node.js 安全指南

    当项目周期快结束时,开发人员会越来越关注应用的"安全性"问题.一个安全的应用程序并不是一种奢侈,而是必要的.你应该在开发的每个阶段都考虑应用程序的安全性,例如系统架构.设计.编码, ...

  7. eclipse 断点调试方法

    1 Debug视图 1.1 线程堆栈视图 线程堆栈视图表示当前线程的堆栈,从中可以看出在运行哪些代码,并且整个调用过程,以及代码行号.分别介绍一下这几个按钮的含义.从左至右分别为: 1.表示当前实现继 ...

  8. Spring boot 使用Redis 消息队列

    package com.loan.msg.config; import com.loan.msg.service.MessageReceiver; import org.springframework ...

  9. zabbix添加持续告警

  10. 代码审计学习01-in_array() 函数缺陷

    一.开始代码审计之旅 01 从今天起,学习代码审计了,这篇文章就叫代码审计01吧,题目来自 PHP SECURITY CALENDAR 2017 的第一题,结合 红日安全 写的文章,开始吧. 二.先看 ...