0.0.2 • Published 3 years ago
ker-guava v0.0.2
vue-npm-package
打包命令
npm run lib
打包完成后,会生成以下文件
dist/demo.html
dist/组件库名字.common.js --> 打包器用的commonJS包
dist/组件库名字.common.js.map
dist/组件库名字.css --> 组件中分离出的css,组件没有css这个文件不会出现
dist/组件库名字.umd.js --> 给浏览器或AMD loader使用的umd包
dist/组件库名字.umd.js.map
dist/组件库名字.umd.min.js --> 压缩后的umd包
dist/组件库名字.umd.min.js.map
手动按需引入组件
上传package中未压缩的原组件到npm
请把根目录下.gitignore文件过滤器中的 package/ 删除,
package文件夹将在npm publish中上传
package/
上传npm
npm publish
上传npm时,上传的文件有
dist/组件库名字.common.js
dist/组件库名字.css
dist/组件库名字.umd.js
dist/组件库名字.umd.min.js
package.json
README.md
不需要上传的文件可以在.gitignore文件过滤器中配置
配置文件
package.json
"name":"组件库名字",
"main": "dist/组件库名字.common.js"
"scripts": {
"lib": "vue-cli-service build --target lib --name 组件库名字 -dest lib package/组件库的index文件.js",
}
vue.config.js
文件中的配置已加上注释,没有特殊需求这个文件不用改动
.gitignore
在文件过滤器中加入以下配置,禁止不需要的文件上传到npm组件库中
# Editor directories and files
src/
public/
vue.config.js
babel.config.js
组件引用
全局引入
import cmpPackage from 'cmp-package'
import 'cmp-package/dist/cmp-package.css'
Vue.use(cmpPackage)
按需引入(方法一)(可用,但待验证)
未验证这是不是按需,但可以这样用没问题。。
import cmpPackage from 'cmp-package'
import 'cmp-package/dist/cmp-package.css'
Vue.use(cmpPackage.ComponentName)
按需引入(方法二)
需要把完整的package上传到npm
import Component from 'cmp-package/package/component/component'
components:{ Component }