最近发布了@types/node-observer包到npm,这里记录下发布过程 TS类型文件的包名通常以@types开头,使用npm publish发布以@types开头的包时需要使用付费账号.   我们无需自己注册付费账号,可以将自己的代码merge到开源项目DefinitelyTyped中,然后发布到npm上. DefinitelyTyped fork仓库DefinitelyTyped,拉取到本地(项目比较大,拉下来比较耗时)添加自己的代码.提交,然后创建Pull requests.勾选P

创建 vue 组件 1.创建vue项目,为了简洁方便,推荐使用webpack-simple构建一个项目 vue init webpack-simple your-project 2.在 src 目录下新建子目录lib,用来放后面自己写的所有组件 3.编写自己的组件 首先新建一个vue文件和一个index.js vue用于编写组件的模版和逻辑,像平时封装插件一样 ps:需要给组件命名 name: xxx,用于后面的导出 具体如下: index.js 作用是将该组件作为 Vue 插件,注册到 Vue

初始化项目vue init webpack-simple XXX 定义组件略 发布配置1.package.json 2.webpack.config.js(注释部分为原配置) 发布1.登录 2.发布npm publish

一.使用 vue create currentdatetime创建项目(可查考https://cli.vuejs.org/zh/guide/creating-a-project.html),创建成功后项目目录结构如下: 二.在项目的根目录新建一个packages文件夹,用于存放需要发布的组件. 三.支持对package目录的处理,在vue.config.js文件中修改配置中的chainWebpack选项. const { defineConfig } = require('@vue/cli-se

我们已经实现了路由的自动化构建,但是我们可以看到,一大串代码怼在里面.当然你也可以说,把它封装在一个JS文件里面,然后使用require('./autoRoute.js')给引入进来,那也行.但是,为什么不把心放大一点呢?比如说,我们把它做成一个npm包!   最初自己做的时候就是这种直接引入封装的JS文件里,可以参考:https://github.com/saucxs/watermark   一.准备工作 1.将npm包的镜像换成  https://www.npmjs.com/ npm con

我们已经实现了路由的自动化构建,但是我们可以看到,一大串代码怼在里面.当然你也可以说,把它封装在一个JS文件里面,然后使用require('./autoRoute.js')给引入进来,那也行.但是,为什么不把心放大一点呢?比如说,我们把它做成一个npm包!   最初自己做的时候就是这种直接引入封装的JS文件里,可以参考:https://github.com/saucxs/watermark   一.准备工作 1.将npm包的镜像换成  https://www.npmjs.com/ npm con

前言  怎么使用npm发布自己的组件包呢?博主看了不少相关的文章,都没有一个好的讲述.要么丢三落四,要么就是复杂到外行人根本看不懂,甚至无从下手.于是,在博主的潜心钻研下,终于成功了!所以,我打算写一篇更为实用的.简洁但详细的.面向小白的教程供大家参考! 前提准备 要求会安装软件: 要求能配置环境变量: 要求会使用CMD: 要求会打开网页注册账号. (只要你会以上技能,这里都可以看懂) 步骤简介 [安装NodeJS] [下载安装包] [安装软件] [测试] [配置环境] [配置环境变量] [安装

一.npm 发布到远程资源库 1.创建package.json Package.json 属性说明 name - 包名. version - 包的版本号. description - 包的描述. homepage - 包的官网 url . author - 包的作者姓名. contributors - 包的其他贡献者姓名. dependencies - 依赖包列表.如果依赖包没有安装,npm 会自动将依赖包安装在 node_module 目录下. repository - 包代码存放的地方的类型

有必要说说我为什么要开始写这个,正文从下面的第一条开始 我最近忙于公司的项目,一直没有抽出时间来写文章.本来想每个月写一片文章,保质保量,无奈上个月没有坚持. 这段时间有点忙,主要是由于公司业务调整,我从原来的广告项目中调整到新业务线的前台页面开发了,和以前一样,还是带着3.4个兄弟姐妹.不同的是以前的项目周期普遍偏长,可以让每个同学有时间从头到尾的把项目吃透,而现在做C端的前台页面往往开发时间非常的短,比如我们就要在1.2个月完成业务线所有前台页面的开发.联调.测试.部署,以及下一步的迭代.由

使用npm发布插件 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 简介 npm是一个全球性的包管理工具,上面有着许许多多的前端插件,当然我们也可以发布 官方地址 https://www.npmjs.com/ 注册 首先我们需要在npm平台上面有一个自己的账号 验证用户 打开我们的终端,在终端里面执行验证命令 npm addUser //登录用户 按照他所提示的步骤来,一步一步来验证 查看当前用户 npm whoami //

请点赞关注,你的支持对我意义重大. Hi,我是小彭.本文已收录到 GitHub · AndroidFamily 中.这里有 Android 进阶成长知识体系,有志同道合的朋友,关注公众号 [彭旭锐] 带你建立核心竞争力. 小彭今天和群友讨论了一下学习方法的问题,觉得还挺感同身受的.有时候我们遇到不懂的地方,潜意识会产生厌恶和恐惧,大脑会驱使我们去学习和查看这个不懂的地方,结果有可能是陷入到另一个不懂的循环里,忘记了最初的目的.关于系统化学习和碎片化学习,你的想法是怎样的呢?评论区里告诉我吧. 前

Vue 开发插件 我们可以先查看Vue的插件的开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: ps: 这里注意一下包的名字前缀是 unisoft ,组件的名字前缀是 uni import UniSoftUI from 'unisoft-ui'; // 或者 const CustomUI = require('unisoft-ui'); // 或者 <script src="..."></s

Vue 开发插件 开发之前先看看官网的 开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: // 这里注意一下包的名字前缀是 custom ,组件的名字前缀是 moor // 这是因为那个名字发布包的时候被占用了(我做实验的时候叫 moor-ui)现在改成了custom-ui,但是组件的前缀懒得改 import CustomUI from 'custom-ui'; // 或者 const CustomUI = requi

自己写的组件 有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持 支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合vue.js 就不需要webpakc这种构建工具了,可以直接在页面内使用,下面以 ‘yyl-npm-practice’ 这个包为例 第一步:使用 vue init webpack-simple yyl-npm-practice   初始化项目 提示: 不要用 vue init webpack npm

vue: V2.5.11 此篇尽量详细,清楚的讲解vue插件的开发到npm的发布,想想将你自己做的东西展示给广大"网民",心里还是有点小激动的...-^_^ 先上一下插件效果图------github传送门 下面我们就来说说详细做法: 1. 初始化项目 vue init webpack-simple vue-pay-keyboard 使用vue创建一个简单的项目,删除src中除了main.js和app.vue外的文件,清空app.vue中无用内容 整理完后项目目录 2.编写插件 vue

本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用. 功能说明 多层弹出时,只有一个背景层. 弹出层嵌入内部组件. 弹出层按钮支持回调 源码下载 实现 多层弹出时,只有一个背景层利用两个组件实现,一个背景层组件(只提供一个背景层,组件名:background.vue),一个弹出层内容管理组件(实现多个内容层的管理,组件名:master.vue). 弹出层嵌入内部组件使用vue的component组件实现,他可以完美支持. 弹出层按钮支持回调在

我们在前端工程开发中通常使用npm这个包管理器来安装各种好用的轮子(当然也有用yarn的),不安分的码工就想,也发布一个试试,哪怕只是一个小时候滚的铁环而不是轮子. 首先,要在 npmjs官网注册自己的账户 编写自己的铁环或轮子工程 创建工程文件夹,npm init git init 编写内容 登录,发布 npm login 这时候命令行会提示输入用户名,(输入注册时的用户名,回车),然后提示输入密码(输入注册时的密码,回车) 不出意外的话就显示`logged in 用户名`之类的信息了 npm

提到封装组件,发布到npm,很多同学都会觉得很神秘.但其实,npm包无非就是我们平时写的比较独立且可复用的模块.当然,想要发布,除了基础组件的编写外,还要进行一些包装.下文通过一个简单的案例,和大家一起讨论组件从开发到发布的整个过程.在此承诺,包教包会! 一.封装组件 封装组件包共有3个步骤: 创建组件模板 自定义组件内容 安装依赖,打包组件 1.创建组件模板 命令:vue init webpack-simple proName,这里我定义项目名叫“hello-world”. 由于是simple

为什么会有这样一篇文章?因为网上的教程/示例只说了怎么做,没有系统详细的介绍引入这些依赖.为什么要这样配置,甚至有些文章还是错的!迫于技术洁癖,我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面的细节,做到面对对于工程出现的错误能够做到有把握. 最近使用阿里低开引擎的时候,想要封装一套组件库作为物料给低开引擎引入.根据低开引擎的物料封层模式,我的诉求是做一套组件库,并且将该组件库以umd方式生成.当然,从零开始开发组件库也是一个比较耗时耗力的事情,所以我想到将antd组件封装,于是催生出了

我们经常使用 npm i  -g  xxxx 安装完成一个包之后,就能直接使用对应的指令.例如安装  vue-cli 或者 express 等 那么下面我们自己做一个类似的效果: 首先要对 npm 发布包,有一定了解,不清楚的,可以先参考 我的另一篇博客https://www.cnblogs.com/muamaker/p/10435481.html 1.首先,我们在 package.json 里面加入 bin 指令:如图 2.在项目下面,新建一个文件 link -> link.js 3.在 li