基于vue脚手架构建库并发布到npm

更新日期: 2020-07-13阅读: 1.5k标签: 脚手架

构建库的常见方法有两种:一种是自己手动构建webpack库打包,设置output为 library; 另一种是基于vue-cli3输出库资源包。我们采用第二种vue脚手架的方式构建库。

新增编译库命令
// package.json 
"scripts": {
    // ...
    "lib": "vue-cli-service build --target lib --name Step --dest dist packages/index.js"
}

// packages/index.js  默认打包Step
import Step from '../steps/src/step';
Step.install = function(Vue) {
    Vue.component(Step.name, Step);
};
export default Step;
  • --name: 库名称。
  • --target: 构建目标,默认为应用模式。这里修改为 lib 启用库模式。
  • --dest: 输出目录,默认 dist。
  • [entry]: 最后一个参数为入口文件,默认为 src/App.vue。

更多详细配置查看vue脚手架官网

如果该库依赖于其他库,请在vue.config.js 配置 externals
// vue.config.js
module.exports = {
    configureWebpack:{
      externals: {
         vue: 'Vue',
         'vue-router':'VueRouter',
         axios: 'axios'
      }
    }
}

执行 npm run lib 就可以发现我们的库被打包到了 根目录的dist文件夹下。

添加 .npmignore 文件(可选)

和 .gitignore 的语法一样,具体需要提交什么文件,看各自的实际情况

# 忽略目录
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map


配置npm库信息

配置package.json文件,以发布库文件。

{
  "name": "gis",
  "version": "1.2.5",
  "description": "基于 Vue 的库文件",
  "main": "dist/gis.umd.min.js",
  "keyword": "vue gis",
  "private": false,
   "files": ["dist"],
  "license": "MIT"
 }
  • name: 包名,该名字是唯一的。可在 npm 官网搜索名字,如果存在则需换个名字。
  • version: 版本号,每次发布至 npm 需要修改版本号,不能和历史版本号相同。
  • description: 描述。
  • main: 入口文件,该字段需指向我们最终编译后的包文件。
  • keyword:关键字,以空格分离希望用户最终搜索的词。
  • author:作者
  • files: 要上传的文件
  • private:是否私有,需要修改为 false 才能发布到 npm
  • license: 开源协议
  • dependencies: 依赖库
注意每次发布新的库,需要更改版本号,规则如下:
"version": "1.2.5" 主版本号为 1,次版本号 2,修订号 5
  • 主版本号(Major):当你做了不兼容的api修改
  • 次版本号(Minor):当你做了向下兼容的功能性新增
  • 修订号(Patch):当你做了向下兼容的问题修正


登录npm

首先设置登录的npm镜像地址

npm config set registry http://168.20.20.57.4873

然后在终端执行登录命令,输入用户名、密码、邮箱即可登录

npm login

接着发布库资源到npm

npm publish

最后发布成功可到官网查看对应的包并下载

npm install package_name


链接: https://www.fly63.com/article/detial/9647

使用 Node.js 开发简单的脚手架工具

像我们熟悉的 vue-cli,react-native-cli 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目。在实际工作中,我们可以定制一个属于自己的脚手架,来提高自己的工作效率。

nodejs脚手架express-generator

安装生成器npm install express-generator -g,创建名称为APP的应用,在浏览器中使用 localhost:3000访问。注:该模板默认用的是 .jade 文件作为模板渲染 若要使用 ejs 可按照一下方法配置

如何快速开发一个自己的项目脚手架?

本文通过一个简单的例子来告诉大家如何使用 Yeoman 快速创建脚手架。要了解更多 yeoman-generator 的开发与使用,可以参考社区里大家写的各类 generator。目前在 npm 上有超过 8000 个 yeoman-generator,也许就会有你的菜。

前端脚手架构建实践

在前端工程化过程中,为了解决多项目中,相似度高的工作,便诞生许多前端脚手架,这里记录下自己实现一个简易前端脚手架过程的实践。主要是解决多个页面相似内容的复制粘贴问题

如何撸一个前端脚手架

vue-cli, create-react-app、react-native-cli 等都是非常优秀的脚手架,通过脚手架,我们可以快速初始化一个项目,无需自己从零开始一步步配置,有效提升开发体验。尽管这些脚手架非常优秀,但是未必是符合我们的实际应用的

手把手教你搭建脚手架工具 - (commander)

commander在Vue-cli、creat-app(react)中都起到了很大的作用,这种创建脚手架的方式与vue-cli的方式不同,vue-cli则是使用git远程拉取项目再完成初始化,这样一来要比这种更加的方便灵活,每次模板变更不需要再次上传包

前端脚手架的那些事儿

NodeJs的出现,让前端工程化的理念不断深入,正在向正规军靠近。先是带来了Gulp、Webpack等强大的构建工具,随后又出现了vue-cli和create-react-app等完善的脚手架,提供了完整的项目架构

vue脚手架写法

一直想建一个自己公司自用的脚手架,可以方便的快速开发。于是开始看vue-cli的源码和一些网上的教程。发现,一款脚手架其实很简单,主要原理就是从远程下载一个模板来新建一个项目。同时提供了一系列的交互来动态的更改模板。

前端使用脚手架的作用

脚手架在前端工作流中负责项目起始阶段创建初始文件。与其他功能模块不同的是,脚手架是一个完全“启下”的模块,它没有任何前置依赖。创建完成项目初始文件之后,脚手架就再无用武之地了。

别在js中写后台地址了,用好React/Vue脚手架的环境变量

前端开发都少不了对后台的调用,后台地址配置在哪里,是一个很纠结的问题 为此大家开动脑筋,想了不少办法:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!