前言

之前一直都是用别人封装好的npm包，新接了一个需求，自己写一个npm包，可以在不同项目中引用，总结一下过程。

一、npm

npm（node package manager），通常称为node包管理器。

二、npm package开发

1、新建一个test-npm-package-self项目

vue init webpack-simple test-npm-package-self

生成项目目录结构

2、安装node_modules，启动

npm install
npm run dev

预览地址：http://localhost:8080

3、配置package.json

{"name": "test-npm-package-self","main":"./dist/test-npm-package-self.js",   //入口文件地址   不写会一直报无法找到 ‘./src/App’的错误"description": "A Vue.js project","version": "1.0.1","author": "Long long ago","license": "MIT","private": false,   //private修改为false,不然无法npm publish"scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot","build": "cross-env NODE_ENV=production webpack --progress --hide-modules"},"dependencies": {"vue": "^2.5.11"},"browserslist": ["> 1%","last 2 versions","not ie <= 8"],"devDependencies": {"babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-preset-env": "^1.6.0","babel-preset-stage-3": "^6.24.1","cross-env": "^5.0.5","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"},"files": [           //files 生成package需要打包那些文件"dist","index.js"]
}

4、新建index.js

import App from './src/App'
import _Vue from 'vue'App.install = Vue => {if (!Vue) { window.Vue = Vue = _Vue }Vue.component(App.name, App)
}
export default App;

5、修改webpack.config.js

var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENVmodule.exports = {entry: NODE_ENV == 'development'?'./src/main.js':'./index.js', //入口文件,判断开发或生产环境output: {path: path.resolve(__dirname, './dist'),publicPath: '/dist/',filename: 'test-npm-package-self.js', //生成文件名},module: {rules: [{test: /\.css$/,use: ['vue-style-loader','css-loader'],},      {test: /\.vue$/,loader: 'vue-loader',options: {loaders: {}}},{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 = [new webpack.DefinePlugin({'process.env': {NODE_ENV: '"production"'}})]
}

5、对应修改index.html引用js名称

6、src下App.vue

<template><div id="app" class="long_app"><div class="long_title"><span>Title:</span>{{msg}}</div><div class="long_input"><input type="text"  placeholder="输入文字，改变Tittle" @input="changeMsg"></div></div>
</template><script>
export default {name: 'app',data () {return {msg: 'test-npm-package-self 成功引用'}},created(){let obj= {a:'a',b:'b'};let obj1 = {...obj,c:'c'}console.log(obj1,'????')},methods:{changeMsg(e){ this.msg = e.target.value }}
}
</script><style>
html,body{height: 60%;position: relative;}
.long_app{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}
.long_title{height: 32px;line-height: 32px;font-size: 16px;}
.long_title span{font-size:18px;color: #da2e03;
}
.long_input{text-align: center;height: 32px;line-height: 32px;font-size: 16px;
}
.long_input input{outline: 0;
}
</style>

7、npm 切换源地址

npm config set registry https://registry.npmjs.org/
npm login
username: 用户名,
password: 你的登录密码
Email: 你的邮箱

登录成功后进行publish
7、publish项目

npm run build
npm publish

8、登录npm 进入packages

找到是否有对应发布的包

到这里生成发布就已经完成，下面验证下是否可以引用，并且打包的package有没有问题

三、引用package

1、安装刚才发布的包test-npm-package-self

npm install test-npm-package-self
npm run dev

2.引用----新建l了一个测试vue项目

<template><div id="app"><h1>这里是test-Vue项目--引用test-npm-package-self包</h1>  <testNpmPackageSelf /></div>
</template><script>
import testNpmPackageSelf from "test-npm-package-self";
console.log(testNpmPackageSelf)
export default {name: 'App',components:{testNpmPackageSelf},methods:{getSourceData(data){console.log(data);}}
}
</script>

最终效果出来了

踩坑：
403 Forbidden - PUT https://registry.npmjs.org/test-npm-package - You do not have permission to publish “test-npm-package”. Are you logged in as the correct user?

大概问题：1、未登录。2、包名重复。3、版本重复
查了一下 test-npm-package包已存在所以改成test-npm-package-self

源码：https://gitee.com/Longlongago0/learn.git

总结

踩坑路漫漫长@~@

用vue写一个npm包(package)，发布及引用相关推荐

每日三问之html5css3新特性、如何写一个npm包、围绕vue-router展开分析知识点
html5&&css3新特性 html5 HTML5 新元素(HTML5提供了新的元素来创建更好的页面结构) 标签描述 <article> 定义页面独立的内容区域. &l ...
如何开发一个npm包并发布
一.安装nodejs 不多说了,网上教程多得是二.创建自己的npm包目录结构 npm-test a.js b.js package.json 开发为了简单便于理解,就开发一个简单地hello程序 ...
npm 查看登陆账号_发布第一个npm包
这篇文章主要介绍如何发布一个npm包,这个过程并不复杂,学完之后你可以发布任何你喜欢的代码到npm网站上,之后你可以使用npm命令安装在其他项目中. 发布到npm网站之前,你必须在npm网站上创建一个 ...
npm收录了哪些包_手把手教你制作一个小而美丽的 npm 包并发布
第1步:npm账户你需要一个 npm 账户,如果米有,注册地址是:npmjs.com/signup 第2步:登录进入你自己电脑的终端(cmd)并输入: npm adduser 也可以使用以下命令: ...
如何编写一个npm包，可以公共使用？
经常开发vue的项目,package.json文件大家应该都非常都清楚,所谓的依赖,就是js逻辑的暴露,现在告诉大家怎么发布自己写的npm包,供全球人使用. npm包创建步骤 1.创建一个文件夹 mk ...
手撸一个npm包，安利一下duiba-sprite
背景我所在组负责我司线上H5互动小游戏的开发,其中一部分开发者负责皮肤的开发.大致流程为:视觉出psd,开发者切图,开发者开发,开发者上传皮肤代码,运营验收.这里边有个奇葩的动作:开发者切图,为什么 ...
怎么开发一个npm包
一.注册npm账号 * 怎么将代码提到github,大家都知道需要一个github账号 * 同样,开发一个npm包,当然也需要一个npm账号,将npm包发布到npm的托管服务器 * 注册地址:[htt ...
npm包的发布-官网发布（一）
npm包的发布 npm初始化 npm init Terminal打印 This utility will walk you through creating a package.json file. ...
[vue] 使用vue写一个tab切换
[vue] 使用vue写一个tab切换 v-for循环,利用下标和v-show显示`<div id="app"><ul class="tabs" ...

用vue写一个npm包(package)，发布及引用

文章目录

前言

一、npm

二、npm package开发

三、引用package

总结

用vue写一个npm包(package)，发布及引用相关推荐

最新文章

热门文章