官网资料 构建生产版本--库模式 https://cn.vitejs.dev/guide/build.html#library-mode 详细设置 https://cn.vitejs.dev/config/#build-lib 技术栈 vite rollup 打包方式 vue-cli 自带的是 webpack 的打包方式,打出的包体积有点大,而 vite 自带的是 rollup 的打包方式,这种方式打包的体积就非常小,官网也有一些使用说明,所以学会之后还是比较很方便的. vite 的库项目可以分

由于升级了 v0.2 版 GearCase 使用打包工具从 parcel 更换成 vue-cli 3.x.因此打包后发布 NPM 包的方式与之前有很大的差异,这也导致了在发布完 GearCase v0.2.2 版本之后,我自己在进行 NPM / Yarn 安装包时.根本无法通过之前文档的方式,进行引入并注册组件.后来我大概花费了两天的时间来解决这个问题. 回顾 由于 parcel 的打包方式与 webpack 有很大的差异.并且当时还处于轮子库 v0.1 版本,引入/注册组件的方式也有不同. 详

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

NPM是Node.js的包管理工具,随着Node.js的出现,以及前端开发开始使用gulp.webpack.rollup以及其他各种优秀的编译打包工具(大多数采用Node.js来实现),大家都开始接触到一些Node.js,发现了使用NPM来管理一些第三方模块会很方便.大家搬砖的模式也是从之前的去插件官网下载XXX.min.js改为了npm install XXX,然后在项目中require或者import. 当然,NPM上边不仅仅存在一些用来打包.引用的第三方模块,还有很多优秀的工具(包括部分打

此文已由作者吴维伟授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 在编写程序时,总会有一些代码是我们不愿意一遍又一遍重复地去写的,比如一些UI或交互相似组件,或是一些相似的流程或逻辑.以前,面对这样的情况,我会将可以复用的部分抽象出来,做成可以复用的模块,放在专门存放公用模块的文件夹中,便于查找和引用.但是这样只能解决单个项目中公用模块复用的问题,如果你的模块需要被多个项目复用,那么就需要另寻它法了.本文讨论的是通过发布npm包来实现模块复用时有哪些注意事项. 新建一个

npm包的更新说明,你还敢不看吗 前言 平时工作少不了依赖一些第三方的npm包,站在各位大牛的肩膀上来更好的写bug,此外还可以学习各位大佬们的各种设计思路和优雅实现.不过npm包虽好,但使用之前也要多加甄别,特别是相同包的不同版本之间的差别,可能一不小心,原本用的飞起的轮子就会让我们笑不出来.下面用两次惨痛的线上问题来给大家提个醒. 版本依赖符号 在描述问题之前,先谈一下npm的包管理控制. 假设我们依赖一个npm包 a 常见的依赖符号有下面这么几种 { "dependencies"

下雪了,在家闲着,不如写一个npm 包发布.简单的 npm 包的发布网上有很多教程,我就不记录了.这里记录下,一个复杂的 npm 包发布,复杂指的构建环境复杂. 整个工程使用 rollup 来构建,其中会引进 babel 来转译 ES6,利用 Eslint 来规范代码的书写风格,最后代码的发布会经过 uglify 压缩.同时发布 umd.es 格式的版本以供外部调用. 完整目录结构如下: 下面是整个过程的记录 一.初始化工程 yarn init -y 初始化后,修改 package.json 内

nodeJS---模块与npm包管理工具 一:从模块外部访问另一个模块内的成员; 假如我现在还在D盘中的node文件夹内中的app.js代码改成如下: var msg = 'hello'; var funName = function(){ return 1; } exports.msg = msg; exports.funName = funName; 使用exports对象将模块中的成员对外可以访问,之后我在同目录下新建app2.js,来调用app.js内的成员msg和funName函数,如

一.目的 主要是纪录和回顾自己开发的一些步骤以及遇到的一些问题和解决方案 二.准备工作 1.IDE 选择 VS Code 2.安装node 环境 (https://nodejs.org/zh-cn/) 3.git仓库  gitlab (https://gitlab.com) (1)  注册 (2)add ssh key(可以看一下 https://gitlab.com/help/ssh/README.md) (3)新建project (4)git clone 到本地 (5)  工程下执行 npm

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

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

前言 我这里是写了一个vue轮播图插件,因此我使用了vue的脚手架工具创建一个项目,当然你也可以选择自己搭建脚手架. 本例中我会使用vue脚手架创建一个项目,并发布到npm上面去. 通过脚手架创建项目 全局安装 首先,要创建项目,封装vue的插件用webpack-simple很合适,因此你需要全局安装@vue/cli-init插件: yarn global add @vue/cli-init //或者 npm install @vue/cli-init -g 使用vue init webpack

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 代码

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

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

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

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

结合docker发布前端项目(基于npm包管理)的shell脚本 本教程依据个人理解并经过实际验证为正确,特此记录下来,权当笔记. 注:基于linux操作系统 目前主流的前后端分离的项目中,常常在部署上线这个环节会遇到很多麻烦,这里我使用了docker进行部署,这段shell脚本我放在前端工程目录下,每次要部署上线时运行这个文件,可以很方便的帮助上线.注解都写在了代码中. #!/usr/bin/env bash // 以下用变量存放一些配置信息 BUILD_PROFILE="prod"

动机 很多人都想写一个自己的轮子,可是开始动手的时候你总会遇到以下问题 一个基本的 js 库应该如何编写 基本的前端项目都要哪些文件 又要怎么打包发布到 npm 上 你的 es6 语法如何才能让别人识别 readme 应该如何编写 如何添加 eslint 怎么才能打包一个 umd 格式文件让 html 直接引用 为此,我专门制作了一套快速搭建 JavaScript 项目库的模板,并且做好了基本的配置. 目录如下: . ├── _config.yml ├── build # 打包后的项目文件目录

章节 Node.js NPM 介绍 Node.js NPM 作用 Node.js NPM 包(Package) Node.js NPM 管理包 Node.js NPM Package.json 包是打包成独立逻辑单元的一组代码.对于开发人员来说,包是方便的工具,包有助于代码重用,项目结构优化.NPM社区内,大约有800,000多个现成的代码包可用,每个包都提供了各种有用的功能. 但是,如果你不能确切地知道哪种包最适用,那就无异于大海捞针.下面列出了常用的NPM库,供参考: express bod

项目地址:loan-calculate-utils npm包的发布.更新查看上一篇文章 开发一个基础的npm包 目前我们的目录是这个样子: . ├── source 源代码目录 │   └── index.js ├── package.json └── README.md 接下来给项目添加 打包,忽视文件,ts声明文件,单元测试,eslint,README.md添加徽标. 打包 参考 ramda 打包思路,我们将要编译成三种包,以及它们的压缩版. 打包目标 umi: babel source -