须知

本文部分内容参考以下链接：
blog.fundebug.com/2018/06/08/…

步骤

1、安装 Vue-CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli

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

2、用 Vue-CLI 创建项目

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

vue create vue-cli

3、调整项目配置

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，来让样式配置生效

4、打包

在项目目录里执行

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

如何用 Vue-CLI 3 打包 npm 包

须知

步骤