1、打包
1.1、组件导出文件编写。
对于所要导出的组件，编写导出配置文件index.js(文件名不固定，和后面使用时保持一致即可)，该文件主要作用是将所要导出的组件import进来，然后批量模块化导出。如下：
1.1.1、import
1.1.2、合并、批量导出
1.2、编写打包配置文件。
1.2.1、build/目录下新增两个配置文件：webpack.cx.conf.js 和 build-cx.js (文件名不固定，使用时匹配即可)，两个配置文件的信息如下：
1.2.1.1、webpack.cx.conf.js
1.2.1.2、build-cx.js
1.2.2、package.json配置文件编写。
在项目根目录的package.json配置文件的scripts中新增一行命令，执行刚刚配置好的build-cx.js文件。如下：
1.3、执行打包命令。
在集成终端输入打包命令：npm run build-cx，即可开始执行打包操作。
打包成功
打包成功后进入刚刚配置的打包输出目录 dist/ 下查看，看看到打包后的文件已经成功生成。
2、发布到npm。
2.1、打包目录下增加配置文件index.js。
在项目目录下增加index.js配置文件（文件名不固定，路径也不固定，我这里是放在了打包目录dist/下。），文件里主要编写文件引入的配置。比如我这里要发布的是whzbcx_code_cx.js文件，我想用户npm安装后直接加载这个文件,就可以在index.js里如下编写：
2.2、package.js文件配置发布信息。
发布前要在package.js中配置发布的信息，这里主要配置项目名、版本号、发布的文件目录、首要加载文件、是否私有。如下：
name: 要发布的项目名称，不能和npm上已有的项目名重复。
version: 发布的项目版本号，不能和之前的版本号重复。
private: 需要为false才能npm发布。
main: 别人npm安装该组件库后首要加载的文件。我这里配置的是刚刚在dist目录下新增的index.js文件
files: 要发布的文件目录，我这里只发布了dist目录下的文件。
2.3、命令行中登录npm账号、发布。
2.3.1、登入npm
打开命令窗口，输入 npm login ,回车，会提示输入用户名、密码、邮箱，三者全部验证通过即可登录成功。
2.3.2、登录成功后，打开package.json所在的目录下，然后运行 npm publish。
如下图所示，即发布成功，最新版本号为 1.0.4.
发布成功
3、安装使用。
3.1、在所要使用的项目目录下npm安装。
打开命令窗口，在所要引用的项目目录下，运行 npm install whzbcx_code_cx ，等待安装成功。
如下，可看到已经安装成功。
安装成功
3.2、配置项目的main.js文件。
将组件模块安装到项目中后，就要在src/main.js文件中来配置使用该组件库了。
配置如下：
上面的配置中，有三部分：引入css文件、引入js文件、循环遍历注册全局组件。
其中是否引入css文件 取决于我们第一步打包时是否将css样式分离出来单独打包成.css文件。
循环遍历注册组件 是因为我们第一步打包时是将多个组件存在一个对象里打包出来的，所以这里需要遍历对象，将里面每一个组件单独进行注册。
网友评论