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文件。
循环遍历注册组件 是因为我们第一步打包时是将多个组件存在一个对象里打包出来的,所以这里需要遍历对象,将里面每一个组件单独进行注册。