vue todo-list组件发布到npm上的方法

前端之家收集整理的这篇文章主要介绍了vue todo-list组件发布到npm上的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

最近几个人合作完成了一个项目,发现有一些公用的基础业务组件,可以提取出来,不仅方便大家在各自模块直接引用,也可以在以后的项目中使用。想到了可不可以自己动手把组件打包发布到内部的npm上,避免以后小伙伴们的重复工作呢?于是乎,说干就干,在这里操练一下,写个todo-list的vue组件案例。案例源码:https://github.com/wuwhs/todoList

建立npm项目

1. 初始化npm项目

建一个文件夹(todoList),在这个文件夹路径下打开cmd窗口,输入指令npm init,前提是已经装好了node(自带npm)。

See npm help json for definitive documentation on these fields
and exactly what they do.

Use npm install <pkg> afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (todolist)

提示输入项目包名称,这里的名称将作为发布到npm上这个包的名称,以后别人使用就可以直接importrequire到项目中使用。

接下来提示输入版本,这里的版本将作为发布到npm上这个包版本控制号,每次发布必须要改一下版本号,才允许发布,在这里作为第一个版本可以直接回车,默认是1.0.0

然后提示输入描述信息,描述一下这个包的功能作用。于是输入:

再者,提示整个项目的入口文件,这里是我们打包后的文件,打包后文件都放到dist目录下,先设定生成文件todoList.min.js,于是:

接下来提示输入测试命令、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 adduser,依次输入npm登录账号、密码和注册激活邮箱。这样就轻松的登录上了。(PS:在window的CMD窗口,输入密码时不显示输入密码,盲输入,确定后回车即可,这里被坑了一下)

最后,直接输入指令publish即可大功告成。

不过,好事多磨,可能事情没有那么顺利。

一个可能取的包名称跟别人的重名了,这样是不能上传上去的,会提示你没有权限发布这个包。

Failed PUT 403 npm ERR! code E403 npm ERR! You do not have permission to publish "vue-router". Are you logged in as the correct user? : vue-router

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2018-04-02T15_41_56_696Z-debug.log

解决方法:需要到package.json里改一下包名称name,或者去npm官网搜一下你要取的名称,有没有同名,再回头来改。

还有就是每次发布,没改版本号。

Failed PUT 403 npm ERR! code E403 npm ERR! You cannot publish over the prevIoUsly published versions: 1.0.1. : vue-todolist

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2018-04-02T15_40_28_571Z-debug.log

解决方法:需要到package.json里改一下版本号后发布。

把npm线路打通了,接下来就是打包输出上传资源了。

webpack打包

组件写好后,一般要借助自动化工具,将资源整合打包压缩,提供一个入口文件,供别人直接引用。在这里,选用webpack来打包。

为了方便演示,写一个vue官网上todo-list的例子,作为组件打包发布。

整个目录结构

下面来分别说明文件内容

1. package.json文件

css-loader": "^0.28.7","file-loader": "^1.1.4","vue-loader": "^13.0.5","vue-template-compiler": "^2.4.4","webpack": "^3.6.0","webpack-dev-server": "^2.9.1" } }

主要安装一些必要的依赖插件,如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') {
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),new webpack.optimize.UglifyJsPlugin({
sourceMap: true,compress: {
warnings: false
}
}),new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}

webpack的基本热更新以及打包配置,可以参考webpack中文官网

3. .babelrc文件

ES6转化工具babel配置

4. main.js项目入口文件

new Vue({
el: '#app',render: h => h(App)
})

5. App.vue vue根组件

6. index.html 页面

<Meta charset="utf-8"> todolist

2. todoList.vue组件——列表项

减小耦合度,把列表项单独拿出来做一个组件。

  • {{ title }}
  • 3. App.vue根组件

    将todo-list组件引入并挂载到根节点。

    刷新浏览器,查看效果

    OK,组件基本完成。

    组件打包

    前面已经验证了,我们写的todo-list组件没问题了,要将这个组件独立打包成一个文件。这时就需要更换一下入口文件了,把测试案例用的main.js换成index.js文件

    独立组件入口文件 index.js

    目的只是将要打包的组件引入。

    export default TodoList

    更改webpack配置 webpack.config.js

    将入口文件更换成./src/index.js文件出口路径和名称更换成package.jsonmain的路径和名称,这样方便不调整npm的发布目录。

    改好后,npm run build,打包组件,结果就在dist目录下有了todoList.min.js文件。这就是打包组件后的文件。也是将要发布到npm上别人真正使用的入口文件

    测试打包好的文件

    刚打包好的文件能不能直接使用,在发布到npm上之前先在本地测试一下。要测试方法很简单,就是把跟组件引入的vue组件改成引入刚打包的文件。于是App.vue这样改:

    import TodoList from '../dist/todoList.min.js' export default { name: 'app',components: { TodoList } }

    再改回测试案例入口,刷新浏览器,报错!

    found in

    --->

    at src\App.vue

    有点小奔溃,没有渲染函数?难道自己打包出来的组件竟然不能用!后来查资料才知道,打包需要指定一种模块输出类型,可以是commonjs,AMD,script,UMD模式。在这里是写插件,要采用UMD模式,即libraryTarget: 'umd'。于是webpack.config.js出口文件配置修改为:

    再打包独立组件,更新todoList.min.js文件,改回测试文件entry: './src/main.js',)入口,npm run dev,刷新浏览器,成功!

    发布和使用npm组件包

    发布npm组件包

    已经验证了我们已经打包生成todoList.min.js可以正常使用,接下来就可以发布到npm上了,同样npm跟git一样,可以使用.npmignore忽略一些上传文件,比如node_moudules就不要上传上去了。

    Editor directories and files

    .idea
    .editorconfig
    .suo
    .ntvs
    .njsproj
    *.sln

    更改一下package.jsonversion,执行npm publish即可

    使用npm组件包

    发布成功后,这就是一个平常使用的插件了,cnpm install vue-todolist --save即可安装(使用npm或cnpm安装均可)完成,

    然后直接在页面中引入使用。

    在App.vue引入todolist组件,就不需要引入本地写的了,直接引入刚才安装好的

    import TodoList from 'vue-todolist' export default { name: 'app',components: { TodoList } }

    再次运行npm run dev,刷新浏览器,一切正常,good。

    总结

    至此,打包、发布和使用自己写的vue组件就完成了。总结一下这几条需要关注:

    1. npm包配置(package.json)中,提供对外使用的入口文件最好跟打包后的文件一致,这样打包完成后就可直接测试和发布;
    2. 每次发布要改版本号;
    3. webpack配置文件出口要加库输出类型libraryTarget: 'umd';
    4. 最好单独用一个文件作为组件输出打包,不要跟测试案例入口文件弄混;

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    原文链接:https://www.f2er.com/vue/32894.html

    猜你在找的Vue相关文章