前言 npm(Node Package Manager),一个Node的包管理器,平时我们常用的公共模块(插件)或者叫做包大多都放在上面,所以接下来要封装的插件,我们就简单称它为npm包,本文从就从这个简单的例子开始,逐步对它进行封装-发布-更新-扩展-使用,进而到得一个相对完整的npm包,下面开始. 一.一个最简单的npm包 1.1 新建文件夹 可以找个地方直接建个文件夹,最好语义化一点,这样以后也方便管理,我们这里用终端建文件夹: mkdir toupper-case-project //…

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": "zgb_npm", "version": "1.0.0&qu…

关于如何使用cnpm搭建私有的npm仓库看这里→ http://blog.fens.me/nodejs-cnpm-npm/ 我本人还没有机会真正实践操作过,公司的npm仓库是我老大搭建的,我这里仅仅记录关于如何发布npm包以及在这过程中出现的问题以及解决的方案. 因为官方的npm上的模块是完全开源,但是公司自己项目有些模块与业务或者逻辑以及一些配置模块肯定不能开源啊,所以需要搭建私有的npm仓库. 1.准备工作 首先安装好npm 以及 cnpm . 现在安装node.js 里会一起安装好npm.…

1.引言 多人.多组织或多组件发布 npm 包到同一个仓库时,可能出现命名冲突问题. 为了解决这个问题,npm 引入了“scope”(范围)概念. 在 Angular 项目中,我们通常可以看到“@angular/core”.“@angular/common”等以“@”符号开头.“/”间隔形式的依赖包,其中“@”和“/”之间的部分就是“scope”,类似编程环境中的“命名空间”. 包含“scope”的包安装到本地后,“scope”以文件夹的形式表现,如下图所示: 2.安装 安装一个包含“scope…

使用Vue-cli3.0创建的项目,如何发布npm包 在使用vue进行项目开发时,如果我们想要发布一个包,有时候会有点迷糊,不知道应该怎么修改脚手架的默认设置.这里记录一下一些常见的操作. 创建index.js进行模块的导出 将我们需要导出的组件在index.js文件中进行统一导出,可能之前需要进行处理,是先进行全局注册Vue.component,还是用户自己注册. import App from './App.vue' export default App; 修改vue.config.js配置…

1.注册一个npm账号: 2.在控制台输入 npm login: 依次输入你的账号信息,可通过 npm whoami 来验证是否登录成功 3.初始化包,控制台输入 npm init: 完成之后,可以看出包下面生成一个package.json,里面的内容就是刚刚初始化的内容. 4. 写入口文件index.js(这里的代码自由发挥): exports.sum = function () { var res = 0; for(var i=0;i<arguments.length;i++){ res +…

1.环境准备 安装node,npm,@vue/cli 2.初始化项目 用@vue/cli创建新项目 vue create mtest-ui 删除public,main.js,App.vue等无关文件,新增packages文件夹存放自己的vue组件 这里我写了一个actionsheet的vue组件放到packages文件夹中 并且在src目录中新增了个js,目录像这样: 其中lib目录是后续打包生成的先不用管 其中index.js是为了把packages中的组件提供一个统一入口来import 代码…

亲测好用,如出错,请留言 1.项目初始化 使用vue脚手架创建,但vuecli太重,我们使用简单的工程脚手架进行处理,输入命令 vue init webpack-simple my-project npm  install npm run dev 初始化以后看一下目录: 2. src中写入vue组件  结构类似于这样 考虑其他ui组件的使用,比如vant, import vant from ‘vant’ Vue.use(vant) 等 index.js中代码可以这样写: import decre…

一.使用vuecli3创建项目 vue create svgicon 二.修改目录,开发组件前的准备 把src目录改为examples作为查看组件的演示目录,新建packages目录作为组件编写的目录. 在packages下新建index.js作为导出组件入口,作为整个组件库的导出,新建组件文件夹作为组件源码的放置,比如我的组件目录叫做 svg-icon ,在svg-icon文件夹下新建index.js文件对外提供对文件的引用,新建src文件夹并创建svg-icon.vue作为组件文件.整个pa…

前言: 工作了几年,想把一些不好找现成的库的常用方法整理一下,发布成npm包,方便使用.也学习一下开发发布流程. 主要用到的工具:npm. 开发库:babel.typescript.rollup.eslint.corejs. 由于目前只是发布一些函数方法,只需要一些兼容性工具,打包工具即可. 一.创建项目 可以直接在github上创建一个空项目,然后克隆到本地. 进入目录下,执行 npm initz 之后将开始初始化package.json: This utility will walk you…