vue todo-list组件发布到npm上的方法
前言最近几个人合作完成了一个项目,发现有一些公用的基础业务组件,可以提取出来,不仅方便大家在各自模块直接引用,也可以在以后的项目中使用。想到了可不可以自己动手把组件打包发布到内部的npm上,避免以后小伙伴们的重复工作呢?于是乎,说干就干,在这里操练一下,写个todo-list的vue组件案例。案例源码:https://github.com/wuwhs/todoList 建立npm项目1. 初始化npm项目建一个文件夹(todoList),在这个文件夹路径下打开cmd窗口,输入指令 See
npm help json for definitive documentation on these fieldsand exactly what they do. Use Press ^C at any time to quit. 提示输入项目包名称,这里的名称将作为发布到npm上这个包的名称,以后别人使用就可以直接 接下来提示输入版本,这里的版本将作为发布到npm上这个包版本控制号,每次发布必须要改一下版本号,才允许发布,在这里作为第一个版本可以直接回车,默认是 然后提示输入描述信息,描述一下这个包的功能作用。于是输入: 再者,提示整个项目的入口文件,这里是我们打包后的文件,打包后文件都放到 接下来提示输入测试命令、git仓库,先不管,后面再详细写,回车默认空。 再提示输入关键字,便于其他人在npm上搜索得到你写的包,最后就是作者和认证,根据自己实际情况填。 {
"name": "vue-todolist","version": "1.0.0","description": "a vue component of todolist","main": "dist/todolist.min.js","scripts": { "test": "echo "Error: no test specified" && exit 1" },"keywords": [ "todolist","vue" ],"author": "wuwhs","license": "ISC" } Is this ok? (yes) yes 这样,一个npm项目就初始化完了。接下来,来发布一个已经打包好了的组件包(先为空的)到npm上。 发布包到npm上首先需要有npm官网的一个注册账号,然后输入 最后,直接输入指令 不过,好事多磨,可能事情没有那么顺利。 一个可能取的包名称跟别人的重名了,这样是不能上传上去的,会提示你没有权限发布这个包。 npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersAdministratorAppDataRoamingnpm-cache_logs2018-04-02T15_41_56_696Z-debug.log 解决方法:需要到 还有就是每次发布,没改版本号。 npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersAdministratorAppDataRoamingnpm-cache_logs2018-04-02T15_40_28_571Z-debug.log 解决方法:需要到 把npm线路打通了,接下来就是打包输出,上传资源了。 webpack打包组件写好后,一般要借助自动化工具,将资源整合打包压缩,提供一个入口文件,供别人直接引用。在这里,选用webpack来打包。 为了方便演示,写一个vue官网上todo-list的例子,作为组件打包发布。 整个目录结构 下面来分别说明文件内容: 1. package.json文件 主要安装一些必要的依赖插件,如vue、babel和webpack 2. webpack.config.js文件 module.exports = {
entry: './src/main.js',output: { path: path.resolve(__dirname,'./dist'),publicPath: '/dist/',filename: 'build.js' },module: { rules: [ { test: /.css$/,use: [ 'vue-style-loader','css-loader' ],},{ test: /.vue$/,loader: 'vue-loader',options: { loaders: { } // other vue-loader options go here } },{ test: /.js$/,loader: 'babel-loader',exclude: /node_modules/ },{ test: /.(png|jpg|gif|svg)$/,loader: 'file-loader',options: { name: '[name].[ext]?[hash]' } } ] },resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' },extensions: ['*','.js','.vue','.json'] },devServer: { historyApiFallback: true,noInfo: true,overlay: true },performance: { hints: false },devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { webpack的基本热更新以及打包配置,可以参考webpack中文官网 3. .babelrc文件 ES6转化工具babel配置 4. main.js项目入口文件 new Vue({
el: '#app',render: h => h(App) }) 5. App.vue vue根组件 6. index.html 页面
todolist
2. todoList.vue组件——列表项 减小耦合度,把列表项单独拿出来做一个组件。 3. App.vue根组件 将todo-list组件引入并挂载到根节点。 刷新浏览器,查看效果 OK,组件基本完成。 组件打包前面已经验证了,我们写的todo-list组件没问题了,要将这个组件独立打包成一个文件。这时就需要更换一下入口文件了,把测试案例用的 独立组件入口文件 index.js目的只是将要打包的组件引入。 export default TodoList
更改webpack配置 webpack.config.js将入口文件更换成 改好后, 测试打包好的文件刚打包好的文件能不能直接使用,在发布到npm上之前先在本地测试一下。要测试方法很简单,就是把跟组件引入的vue组件改成引入刚打包的文件。于是
import TodoList from '../dist/todoList.min.js'
export default {
name: 'app',components: {
TodoList
}
}
再改回测试案例入口,刷新浏览器,报错! found in
---> 有点小奔溃,没有渲染函数?难道自己打包出来的组件竟然不能用!后来查资料才知道,打包需要指定一种模块输出类型,可以是 再打包独立组件,更新 发布和使用npm组件包发布npm组件包已经验证了我们已经打包生成的 Editor directories and files
.idea 更改一下 使用npm组件包发布成功后,这就是一个平常使用的插件了, 然后直接在页面中引入使用。 在App.vue引入todolist组件,就不需要引入本地写的了,直接引入刚才安装好的
import TodoList from 'vue-todolist'
export default {
name: 'app',components: {
TodoList
}
}
再次运行 总结至此,打包、发布和使用自己写的vue组件就完成了。总结一下这几条需要关注:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |