xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

UMD 模块 vs CJS 模块

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 发布文章使用：只允许注册用户才可以访问！

posted @ 2021-01-16 21:57  xgqfrms  阅读(267)  评论(2)  编辑  收藏  举报