UMD 模块 vs CJS 模块

使用方式

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



<!DOCTYPE html>

<html lang="zh-Hans">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="xgqfrms">

    <meta name="generator" content="VS code">

    <title>xyz demo 2</title>

    <!-- 引入样式 -->

    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">

    <link rel="stylesheet" href="./xyz.css">

</head>

<body>

    <main>

      <div id="vue_app">

        <section>

          <xyz-hello :msg="author"></xyz-hello>

          <xyz-message :msg="msg"></xyz-message>

          <!-- <br />

          <Hello :msg="author"></Hello>

          <Message :msg="msg"></Message> -->

              <!-- element-ui -->

          <el-row>

            <el-button>默认按钮</el-button>

            <el-button type="primary">主要按钮</el-button>

            <el-button type="success">成功按钮</el-button>

            <el-button type="info">信息按钮</el-button>

            <el-button type="warning">警告按钮</el-button>

            <el-button type="danger">危险按钮</el-button>

          </el-row>

          <!-- xyz-ui -->

          <el-row>

            <xyz-hello :msg="author"></xyz-hello>

            <xyz-message :msg="msg"></xyz-message>

          </el-row>

        </section>

      </div>

    <main>

    <!-- 引入组件库 -->

    <script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>

    <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>

    <!-- <script src="./xyz.umd.js"></script> -->

    <script src="./xyz.umd.min.js"></script>

    <script>

      console.log(`xyz =`, xyz);

      console.log(`xyz.default[0] =`, xyz, xyz.default[0]);

      console.log(`xyz.default[1] =`, xyz, xyz.default[1]);

      var vm = new Vue({

        el: '#vue_app',

        // vm === data

        data: {

            msg: "vue ui lib ",

            author: "xgqfrms",

        },

        component: {

          // xyz 模块，引用方式

          // Hello: xyz.default[0],

          // Message: xyz.default[1],

        },

      });

      setTimeout(() => {

        let div = document.querySelector("#vue_app");

        div.style.display = "block";

      }, 0);

    </script>

</body>

</html>

CJS



import Vue from "vue";

import App from "./App.vue";

import router from "./router";

import store from "./store";

import ElementUI from "element-ui";

import "element-ui/lib/theme-chalk/index.css";

// 全局导入

import XYZ from "../lib/xyz.common";

import '../lib/xyz.css';

Vue.use(ElementUI);

Vue.use(XYZ);

Vue.config.productionTip = false;

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount("#app");

npm package



import Vue from "vue";

import App from "./App.vue";

import router from "./router";

import store from "./store";

import ElementUI from "element-ui";

import "element-ui/lib/theme-chalk/index.css";

// 全局导入, ??? src/index 全局注册入口

import XYZ from "@xgqfrms/xyz/lib/xyz.common.js";

import '@xgqfrms/xyz/lib/lib/xyz.css';

Vue.use(ElementUI);

Vue.use(XYZ);

Vue.config.productionTip = false;

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount("#app");

src/index 全局注册入口

/* Automatically generated by './build/bin/build-entry.js' */

// 全局引入 ElementUI

import Vue from 'vue';

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

// 导入组件

import Hello from './hello';

import Message from './message';

import * as PACKAGE from '../package.json';

// 存储组件列表

const components = [

  Hello,

  Message,

];

// 定义 install 方法，接收 Vue 作为参数。

// 如果使用 use 注册插件，则所有的组件都将被注册

const install = function (Vue) {

  // 判断是否安装

  if (install.installed) return;

  // 遍历注册全局组件

  components.forEach(component => {

    Vue.component(component.name, component);

  });

  // Vue.prototype 全局属性

  // Vue.prototype.$message = DuiMessage;

}

// 判断是否是直接引入文件

if (typeof window !== 'undefined' && window.Vue) {

  install(window.Vue);

}

export default {

  version: PACKAGE.version,

  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装

  install,

  // 以下是具体的组件列表

  ...components,

};

脚本自动注册

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

// 全局导入, ??? src/index 全局注册入口 

-import XYZ from "@xgqfrms/xyz/lib/xyz.common.js";

+import XYZ from "@xgqfrms/xyz";

import '@xgqfrms/xyz/lib/lib/xyz.css';

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



var Components = require('../../components.json');

var fs = require('fs');

var render = require('json-templater/string');

var uppercamelcase = require('uppercamelcase');

var path = require('path');

var endOfLine = require('os').EOL;

var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');

var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';

var INSTALL_COMPONENT_TEMPLATE = '  {{name}}';

var MAIN_TEMPLATE = `

/* Automatically generated by './build/bin/build-entry.js' */

{{include}}

import locale from 'element-ui/src/locale';

import CollapseTransition from 'element-ui/src/transitions/collapse-transition';

const components = [

  {{install}},

  CollapseTransition

];

const install = function(Vue, opts = {}) {

  locale.use(opts.locale);

  locale.i18n(opts.i18n);

  components.forEach(component => {

    Vue.component(component.name, component);

  });

  Vue.use(InfiniteScroll);

  Vue.use(Loading.directive);

  Vue.prototype.$ELEMENT = {

    size: opts.size || '',

    zIndex: opts.zIndex || 2000

  };

  Vue.prototype.$loading = Loading.service;

  Vue.prototype.$msgbox = MessageBox;

  Vue.prototype.$alert = MessageBox.alert;

  Vue.prototype.$confirm = MessageBox.confirm;

  Vue.prototype.$prompt = MessageBox.prompt;

  Vue.prototype.$notify = Notification;

  Vue.prototype.$message = Message;

};

/* istanbul ignore if */

if (typeof window !== 'undefined' && window.Vue) {

  install(window.Vue);

}

export default {

  version: '{{version}}',

  locale: locale.use,

  i18n: locale.i18n,

  install,

  CollapseTransition,

  Loading,

  {{list}}

};

`;

delete Components.font;

var ComponentNames = Object.keys(Components);

var includeComponentTemplate = [];

var installTemplate = [];

var listTemplate = [];

ComponentNames.forEach(name => {

  var componentName = uppercamelcase(name);

  includeComponentTemplate.push(render(IMPORT_TEMPLATE, {

    name: componentName,

    package: name

  }));

  if (['Loading', 'MessageBox', 'Notification', 'Message', 'InfiniteScroll'].indexOf(componentName) === -1) {

    installTemplate.push(render(INSTALL_COMPONENT_TEMPLATE, {

      name: componentName,

      component: name

    }));

  }

  if (componentName !== 'Loading') listTemplate.push(`  ${componentName}`);

});

var template = render(MAIN_TEMPLATE, {

  include: includeComponentTemplate.join(endOfLine),

  install: installTemplate.join(',' + endOfLine),

  version: process.env.VERSION || require('../../package.json').version,

  list: listTemplate.join(',' + endOfLine)

});

fs.writeFileSync(OUTPUT_PATH, template);

console.log('[build entry] DONE:', OUTPUT_PATH);

refs

xgqfrms 2012-2020

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

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

python常用模块(模块和包的解释，time模块，sys模块，random模块，os模块，json和pickle序列化模块)
1.1模块什么是模块: 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文 ...
Python模块之常用模块，反射以及正则表达式
常用模块 1. OS模块用于提供系统级别的操作,系统目录,文件,路径,环境变量等 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("di ...
python基础知识8——模块1——自定义模块和第三方开源模块
模块的认识模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需 ...
Python引用模块和查找模块路径
模块间相互独立相互引用是任何一种编程语言的基础能力.对于"模块"这个词在各种编程语言中或许是不同的,但我们可以简单认为一个程序文件是一个模块,文件里包含了类或者方法的定义.对于编译 ...
threading模块和queue模块实现程序并发功能和消息队列
简介: 通过三个例子熟悉一下python threading模块和queue模块实现程序并发功能和消息队列. 说明:以下实验基于python2.6 基本概念什么是进程? 拥有独立的地址空间,内存,数 ...
VBA标准模块与类模块
大家通过之前的介绍,已知道怎么将一个空模块插入VBA的工程中.从插入模块中可以看到,模块有有两种——标准模块与类模块.类模块是含有类定义的特殊模块,包括其属性和方法的定义.在后面会有介绍与说明. 随着 ...
ansible定时任务模块和用户组模块使用
接上篇,还是一些基础模块的使用,这里主要介绍的是系统模块的使用. 下面例子都进行过相关的实践,从而可以直接进行使用相关的命令. 3.用户模块的使用用户模块主要用来管理用户账号和用户的属性(对远程主机 ...
ansible服务模块和组模块使用
本篇文章主要是介绍ansible服务模块和组模块的使用. 主要模块为ansible service module和ansible group moudle,下面的内容均是通过实践得到,可以直接运行相关 ...
python-Day5-深入正则表达式--冒泡排序-时间复杂度 --常用模块学习:自定义模块--random模块:随机验证码--time & datetime模块
正则表达式语法: mport re #导入模块名 p = re.compile("^[0-9]") #生成要匹配的正则对象 , ^代表从开头匹配,[0 ...

随机推荐

配接Cisco设备
STP 根桥、根端口、指定端口是如何选举的
学习HCIA过程中,对交换机的根桥.跟端口以及指定端口选举有些迷糊,也度娘了一番,总觉得一部分人解释的不够全面精细.通过仔细研究最终有了自己的理解,分享给大家,如果纰漏,欢迎指正. STP收敛过程: ...
code-server Command ' ' not found
由于通过一些特殊的方式登录linux用户后,全局变量不会自动加载,需要在 vscode 的 bash terminal手动读取输入 source /etc/profile 或者vim ~/.bash ...
IDEA安装问题解决
一,安装正确的jdk和idea版本首先在控制面查看电脑位数,电脑是64位的,安装64位的jdk和idea 二.打开正常的快捷键有两个启动项,打开对应位数的三,权限问题如果弹出不能加载jvm的提 ...
纯手工撸一个vue框架
前言 vue create 真的很方便,但是很多人欠缺的是手动撸一遍.有些人离开脚手架都不会开发了. Vue最简单的结构步骤搭建最基本的结构打开空文件夹,通过 npm init 命令生成pack ...
(转载)微软数据挖掘算法:Microsoft 时序算法之结果预测及其彩票预测(6)
前言本篇我们将总结的算法为Microsoft时序算法的结果预测值,是上一篇文章微软数据挖掘算法:Microsoft 时序算法(5)的一个总结,上一篇我们已经基于微软案例数据库的销售历史信息表,利用M ...
oracle模糊查询mysql的区别
https://blog.csdn.net/weixin_38673554/article/details/86503982#_1 oracle与使用mysql的区别 https://www.cnbl ...
长连接开发踩坑之netty OOM问题排查实践
https://mp.weixin.qq.com/s/jbXs7spUCbseMX-Vf43lPw 原创: 林健 51NB技术 2018-07-13
从一片森林(JavaScript)到另一片森林(C++)
从JavaScript到C Plus Plus 作为一个忠诚的Web开发者,JavaScript几乎是我这一年多以来的首选,不管是开发网站后端服务,还是开发跨端应用,我都会首选一个使用JavaScri ...
SQL系列总结——基础篇（三）
之前的两篇文章SQL系列总结:<基础篇一>, <基础篇二>已经介绍了一些基本的数据库知识.现在让我们来从头开始构建一个数据库.到管理数据库和对象. 架构开始! 1.创建 ...

UMD 模块 vs CJS 模块

UMD 模块 vs CJS 模块

使用方式

脚本自动注册

refs

xgqfrms 2012-2020

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

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

随机推荐

热门专题

UMD 模块 vs CJS 模块

UMD 模块 vs CJS 模块

使用方式

脚本自动注册

refs

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

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

随机推荐

热门专题

xgqfrms 2012-2020

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