如何用 Vue-CLI 3 打包 npm 包

须知

本文部份内容参考如下连接：
blog.fundebug.com/2018/06/08/…

步骤

一、安装 Vue-CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码

参考：cli.vuejs.org/zh/guide/in…

二、用 Vue-CLI 建立项目

定位到上级目录，建立 Vue-CLI 项目。新建或者覆盖均可以

vue create vue-cli
复制代码

三、调整项目配置

Vue-CLI 在建立好项目后会自动进行安装，安装完毕的项目目录以下图

① 设定打包范围

设定输出目录为 components 文件夹

设定打包 npm 包，输出的主题内容在 src/components 目录下

编写须要输出的主文件

在 components 文件夹下建立 component.vue 文件，在 components 文件夹下建立 parts 文件夹，parts 文件夹下建立子控件 part1.vue、part2.vue, 被 component.vue 引用。更新好内容的目录以下图：

components 文件夹下的任何文件，均可以引用 components 外的任何文件，对打包不会形成影响。

建立输出目录文件

先在 src/components 目录下建立 index.js 文件

import component from './component.vue';

component.install = Vue => Vue.component(component.name, component);

export default component;
复制代码

以上是输出单组件的写法，输出多组件的写法参考下列代码

② 配置 package.json 文件

🐽name

name 表示打包出来的项目的名字，未来这个库被别的项目引用，名字决定了它在 node_modules 下文件夹的名字。

若是你但愿打包出一个 npm 包库群下的一个组件，假设这个 npm 包库群的名字叫 @demo, 这个包自己的名字叫 tester, name 栏这么写:

@demo/tester
复制代码

其余项目引用后，node_modules 里就会长这样：

固然前缀什么都没有的话:

"name": "tester"
复制代码

其余项目引用后， node_modules 里就是光一个 tester 文件夹。

🐽version

版本号，从 0.1.0 开始, 每次 publish 前升级下版本号。

description

项目描述

keyword

一个字符串数组，方便别人搜索到本模块

licence

证书 说明对应的开源协议
如何选择证书，引用自 阮一峰 的文章

repository

代码管理的地址

🐽 main

项目入口文件地址

"main": "./dist/component.common.js"
复制代码

component 这个名字和后面配置的 scripts 里面的命名有关

🐽 files

普通项目引用这个库，实际须要的文件，是在咱们打包输出的 dist 文件夹里的，可是这种输出文件放到 git 管理里又不智能，能够在 package.json 里添加这个 files,

"files": [
    "dist"
],
复制代码

能够达到既不在 git 代码管理里存储 dist 文件夹，普通项目又能引入所需文件的目的。

🐽 scripts

在 scripts 中添加打包指令：

"build-bundle": "vue-cli-service build --target lib --name component ./src/components/index.js"
复制代码

这样每次打包只须要执行

yarn build-bundle
复制代码

便可 (记得升级版本号)

private

"private": false,
复制代码

若是是公司内部的 npm 包，就不须要改了

依赖

项目中会有 dependencies、devDependencies、peerDependencies
具体区分参考 这篇文章
有助于减少包的大小

③ 配置 vue.config.js 文件

添加 css 内联配置

module.exports = {
    ...
    css: { extract: false }
    ...
}
复制代码

这样打包出来的文件会直接被内联到脚本文件里，不须要落地项目再引用一遍 css，来让样式配置生效

四、打包

在项目目录里执行

yarn build-bundle
复制代码

进行打包

若是你要打包到外面的 npm 库 发布：npm publish --access public

实际发布的时候，我用的 name 是 @pimkle/tester

npm 未登陆注册等报错信息，在键入 npm publish 后，terminal 都会告诉你的，按照 terminal 的提示一步步进行操做便可。

DEMO

上文提到了各个注意点，具体参考 demo 以下：
github.com/pimkle/npm-…

该 demo 项目未在实际项目引用测试过，有任何问题请留言或者发邮件和我联系 yeonkitt@gmail.com