vue组件封装成npm包 - 阿伮 - 博客园

以我自己封装的一个npm包为例,用于音频打点切分,展示音频波形图,波形图选区播放等,如下图: 

 传送门:

npm: https://www.npmjs.com/package/audio_wave_plugin

github源码:https://github.com/panxiaoxiao0823/audio_wave_plugin

封装过程:

1.初始化vue简单模板:

?

1

2

3

4

vue init webpack-simple audio_wave_plugin

cd audio_wave_plugin

npm install

npm run dev

2.创建,目录结构如下:

src/myPlugin目录:如果有多个插件的话规范整理

src/myPlugin/audio_wave目录:当前要封装的组件

 3.app.vue本地调试该组件,直至没有问题

 4.修改src/myPlugin/audio_wave/index.js 文件,目的:将该组件作为 Vue 插件

复制代码; "复制代码")

// audioWave 插件对应组件的名字
import audioWave from './audio_wave.vue'; // Vue.js 的插件应当有一个公开方法 install 。第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象 // 参考:https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6 // 此处注意,组件需要添加name属性,代表注册的组件名称,也可以修改成其他的
audioWave.install = Vue => Vue.component(audioWave.name, audioWave);//注册组件
export default audioWave;

复制代码; "复制代码")

此处需要注意的是 install。 Vue的插件必须提供一个公开方法 install,该方法会在你使用该插件,也就是 Vue.use(yourPlugin)时被调用。这样也就给 Vue全局注入了你的所有的组件。

5. 修改配置项

(1)修改 webpack.config.js ,修改完成后执行npm run build 看下是否生效

复制代码; "复制代码")

// 执行环境
const NODE_ENV = process.env.NODE_ENV;
console.log("-----NODE_ENV===",NODE_ENV);

module.exports = { // 根据不同的执行环境配置不同的入口
entry: NODE_ENV == 'development' ? './src/main.js' : './src/myPlugin/sumFunction/index.js',
output: {

path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'audio_wave.js',
library: 'audio_wave', // 指定的就是你使用require时的模块名
libraryTarget: 'umd', // 指定输出格式
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define

},

复制代码; "复制代码")

  library:指定的就是你使用require时的模块名

  libraryTarget:为了支持多种使用场景,我们需要选择合适的打包格式。常见的打包格式有 CMD、AMD、UMD,CMD只能在 Node 环境执行,AMD 只能在浏览器端执行,UMD 同时支持两种执行环境。显而易见,我们应该选择 UMD 格式。

  有时我们想开发一个库,如lodash,underscore这些工具库,这些库既可以用commonjs和amd方式使用也可以用script方式引入。

  这时候我们需要借助library和libraryTarget,我们只需要用ES6来编写代码,编译成通用的UMD就交给webpack了

  umdNamedDefine:会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define

  (2)修改package.json 文件:

// 发布开源因此需要将这个字段改为 false
"private": false, // 这个指 import 的时候它会去检索的路径
"main": "dist/audio_wave.js",

6.提交发布

(1)在npm官网注册账号,地址:https://www.npmjs.com/,注册好之后,注意邮箱要验证,会发送验证链接到你的注册邮箱,没有验证的话是不能发布代码的

(2)package.json 中 author 尽量与 npm 账户一致

(3)项目根目录下,打包之后,登录npm账号,输入用户名、密码、邮箱,npm publish发布

npm run build
npm login
npm publish

7.现在其他项目可以安装引用了

npm install audio_wave_plugin --save //main.js中引入
import audioWave from 'audio_wave_plugin' Vue.use(audioWave)

8.npm包更新迭代方法

(1)新建npm包:

npm login
npm publish

(2)已有npm包,在已有npm包基础上更新版本

npm version <update_type> npm publish

  update_type 有三个参数:第一个是patch,  第二个是minor,第三个是 major

       patch:这个是补丁的意思,补丁最合适;

       minor:这个是小修小改;

       major:这个是大改咯;

  比如原来版本1.0.0

  •   npm version patch  //修改为1.0.1
  •   npm version minor  //修改为1.1.0
  •   npm version major //修改为2.0.0 

封装过程中出现一些问题,现记录如下:

1.其他项目引用时候,main.js中Vue.use()时候报错Uncaught TypeError: Cannot read property ‘toLowerCase‘ of undefined,原因:

源代码中index.js 中注册的组件需要有name属性,代表注册的组件名称;import的文件是vue文件;


原网址: 访问
创建于: 2021-05-14 11:11:59
目录: default
标签: 无

请先后发表评论
  • 最新评论
  • 总共0条评论