// ... 此处省略代码 const NODE_ENV = process.env.NODE_ENV module.exports = { // 根据不同的执行环境配置不同的入口 entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js', output: { // 修改打包出口，在最外级目录打包出一个 index.js 文件，我们 import 默认会指向这个文件 path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'custom-ui.js', library: 'custom-ui', // 指定的就是你使用require时的模块名 libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的 umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define }, // ... 此处省略代码 }
然后, 再修改package.json 文件:
// 发布开源因此需要将这个字段改为 false "private": false, // 这个指 import custom-ui 的时候它会去检索的路径 "main": "dist/unisoft-ui.js",
发布命令只有两步骤:
npm login // 登陆
npm publish // 发布
完成之后我们就可以在项目中安装使用了
在项目中使用unisoft-ui
在自己的项目中使用unisoft-ui, 先从 npm 安装
npm install unisoft-ui -S
在 mian.js 中引入
import UniSoftUI from 'unisoft-ui' Vue.use(UniSoftUI)
在组件中使用:
<template> <div> <h1>{{msg}}</h1> <uni-switch v-model="isSwitch"> <span>{{switchText}}</span> </uni-switch> </div> </template> <script> export default { name: 'app', data() { return { msg: 'welecom to unisoft-ui', isSwitch: false, } }, computed: { switchText() { return this.isSwitch ? '开' : '关'; } }, } </script>
注意: 在发布npm包之前要先修改 .gitignore 去掉忽略 dist, 因为我们打包的文件也需要提交；每次上到 npm 上需要更改版本号，package.json 里的 version 字段
总结
以上所述是小编给大家介绍的Vue 组件封装 并使用 NPM 发布的教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: