前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础,了解一点 webpack Are you ready?  Go! 目录 编写自己的npm包 发布npm包 使用自己的npm包 更新npm包 最终效果 一.编写自己的npm包 1. 新建一个空文件夹 2. 进入文件夹,终端(cmd)运行 npm init 完成后会在目录下生成一个 package.js…

最近刚好自己需要写公有npm包及上传,虽然百度上资料都能找到,但是都是比较零零碎碎的,个人就来整理下,如何从零开始写一个npm包及上传. 该篇文件只记录一个大概的流程,一些细节没有记录. tips: 这篇文章基于Vue.js 和 github   预备工作 1.首先你需要npm账号和github账号(个人用的是github). 注册账号都比较简单,个人就不再描述. 2.将npm账号和github账号关联,这样才能找到你的代码. 在npm里面找到你的个人设置(Profile Settings),在…

从0到1发布一个npm包 author: @TiffanysBear 最近在项目业务中有遇到一些问题,一些通用的方法或者封装的模块在PC.WAP甚至是APP中都需要使用,但是对于业务的PC.WAP.APP往往是不同的业务.不同的代码库中,尽管已经将公用的组件和方法抽离到各自公共common中,但是各个大业务大方向上的公用封装依然不能满足需求. 比如一个计算文档类型大小的方法,可能都同时存在于各个业务的common中,假设是有3处代码库中均有:如果此时的需求是将文档类型或者大小的方法进行一些修改,…

转自: https://liaolongdong.com/2019/01/24/publish-public-npm.html 如何开发一个npm包并发布到npm中央仓库需求背景:平时在项目工作中可能会用到很多通用性的代码,比如,框架类.工具类以及公用的业务逻辑代码等等,通过打包发布到npm中央仓库或者私有仓库,来进行维护和托管代码,方便公用代码的使用,如果涉及到不方便公开的代码组件可以发布到私有仓库. npm包命名规则及文件夹结构用模块的名称命名根目录,npm包名不能重复 每个npm包根目录下…

前言 最近写项目开发新模块的时候,每次写新模块的时候需要创建一个组件的时候(包含组件css,index.js,组件js),就只能会拷贝其他组件修改名称 ,但是写了1-2个后发现效率太低了,而且极容易出错,所以自己写一个npm包来减少工作量,下面就一步一步来创建一个属于自己的npm仓库 首先第一步创建一个package.json文件,打开终端,输入以下命令: npm init 然后会依次提示项目名称.版本.项目描述.入口文件...一直回车,直到出现Is this ok? (yes) ,然后输入ye…

发布一个npm包,webpack loader: reverse-color-loader,实现颜色反转. 初始化项目 mkdir reverse-color-loader cd ./reverse-color-loader npm init 新建 index.js,手写一个 webpack loader 实现颜色反转.webpack loader 开发文档查看 编写一个 loader module.exports = function (source) { var newSource = so…

一 背景 在工作时,突然接到经理的一个要求,需要将一个react的高阶组件函数封装成一个npm包.之前从没弄过,当场还是有些懵逼的,但是这毕竟是工作,不能推脱.于是开始了学习.汤坑之旅.最终包发布,线上项目成功使用,虽然导致了一次线上故障,但还是快速地fix掉.吃一堑长一智,记录一下整个发布的过程和遇到的一些问题. 二 流程 npm 包可以将可复用逻辑封装成一个工具库,依赖 npm 的强大生态,可以在项目中引入,让代码变得更加简洁,提高效率. 在 npm 官网注册一个账号. 在本地登录 npm…

原文地址:https://www.cnblogs.com/sghy/p/6829747.html 1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站注册地址:https://www.npmjs.com/signup 2.命令行工具登录npm npm login 验证登录是否成功 npm who am i 3.创建npm库 npm init 按照提示输入相应内容: 以下为package.json内容: { "name": "z…

一.安装nodejs 不多说了,网上教程多得是 二.创建自己的npm包 目录结构 npm-test a.js b.js package.json 开发 为了简单便于理解,就开发一个简单地hello程序 a.js function hello(name){ console.log("hello "+ name); } exports.hello=hello; b.js var h=require('./a'); h.hello('Jarrick'); 使用命令npm init创建一个pa…

最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现. 创建library 完整代码 核心代码为 output: { path: DIST_PATH, publicPath: "", chunkFilename: "[name].js", filename: "testPlugin.js", librar…