使用lib模式打包

在vue-cli官网中有指出如何使用lib模式构建代码。

当你运行 vue-cli-service build 时，你可以通过 --target 选项指定不同的构建目标。它允许你将相同的源代码根据不同的用例生成不同的构建。

lib模式默认是不含有Vue的，若原代码中有vue，则会将原代码中的vue删除。

注意对 Vue 的依赖

在库模式中，Vue 是外置的。这意味着包中不会有 Vue，即便你在代码中导入了 Vue。如果这个库会通过一个打包器使用，它将尝试通过打包器以依赖的方式加载 Vue；否则就会回退到一个全局的 Vue 变量。

要避免此行为，可以在build命令中添加--inline-vue标志。

vue-cli-service build --target lib --inline-vue

 

核心命令——将一个单独的入口构建为一个库：

vue-cli-service build --target lib --name myLib [entry]

 这个入口可以是一个 .js 或一个 .vue 文件。如果没有指定入口，则会使用 src/App.vue。我们只需要在指定的入口文件中export我们需要的模块即可。

例如：

export {default as Button} from './button/button'
export {default as Cascader} from './cascader/cascader'
export {default as CascaderItems} from './cascader/cascader-items'
export {default as GridRow} from './grid/row'
export {default as GridCol} from './grid/col'
export {default as Input} from './input/input'

构建一个库会输出：

• dist/myLib.common.js：一个给打包器用的 CommonJS 包 (不幸的是，webpack 目前还并没有支持 ES modules 输出格式的包)
• dist/myLib.umd.js：一个直接给浏览器或 AMD loader 使用的 UMD 包
• dist/myLib.umd.min.js：压缩后的 UMD 构建版本
• dist/myLib.css：提取出来的 CSS 文件 (可以通过在 vue.config.js 中设置 css: { extract: false } 强制内联)

将打包命令写入package.json中：

"description": "一个基于vue的ui组件库",
  "main": "dist/Tione.umd.min.js",  //打包后的包入口文件
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name Tione src/index.js",
  },

打包出来的文件：

 

 

JS中的模块是什么

1、立即执行函数

在js早期的时候，是没有模块的概念的，仅仅是一个个简单的脚本。js程序员们通过立即执行函数封装成一个个独立的局部作用域，这就是模块早期的雏形。

2、CommonJS

直到node.js的诞生，js可以写后台了，后台代码量大功能多，不得不需要封装成模块以便调用。而这个JS模块化标准称之为——CommonJS。

CommonJS是同步的，同步的在node.js环境服务器中使用同步加载模块是没有问题的，但在浏览器中js是在html中异步加载资源的，CommonJS在浏览器中就不太使用了。

代码风格：

module;
module.exports=new hello();

3、AMD

requirejs模块化标准，我们称之为AMD。它是异步代码，适用于在浏览器中进行加载。

代码风格：

require(['vue'],function (Vue) {  //参数vue就是vue.js对外暴露的对象
    // 内容
    new Vue()
});

4、import/export

ES6的新语法import/export，ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。换句话说，ES6 的import有点像 Unix 系统的“符号连接”，原始值变了，import加载的值也会跟着变。因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

5、UMD

umd是AMD和CommonJS的结合，即可异步也可同步。

开发人员又想出另一个更通用的模式UMD （Universal Module Definition）。希望解决跨平台的解决方案。UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。再判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。

 

webpack的环境判断

我们可以点开打包后的dist文件中以umd.js结尾的文件，看看webpack是如何进行环境判断的。

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object') //node.js
		module.exports = factory(require("vue"));
	else if(typeof define === 'function' && define.amd) //AMD webpack 浏览器环境
		define([], factory);
	else if(typeof exports === 'object') //???
		exports["Tione"] = factory(require("vue"));
	else //root => window global 等等其它环境
		root["Tione"] = factory(root["Vue"]);  
})