温州网页建站模板,html代码中标签的书写不区分大小写,wordpress用了什么框架,网站统一建设统一管理大家好#xff0c;我是若川。持续组织了6个月源码共读活动#xff0c;感兴趣的可以点此加我微信 ruochuan02 参与#xff0c;每周大家一起学习200行左右的源码#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列在Ver… 大家好我是若川。持续组织了6个月源码共读活动感兴趣的可以点此加我微信 ruochuan02 参与每周大家一起学习200行左右的源码共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列在Verdaccio搭建npm私有服务器中我们介绍了如何搭建一个Npm私有服务器服务器搭建完成后我们本文来学习一下如何上传我们自己的npm包。前端模块化作为前端必备的一个技能已经在前端开发中不可或缺而模块化带来项目的规模不断变大项目的依赖越来越多随着项目的增多如果每个模块都通过手动拷贝的方式无异于饮鸩止渴我们可以把功能相似的模块或组件抽取到一个npm包中然后上传到私有npm服务器不断迭代npm包来更新管理所有项目的依赖。npm包的基本了解首先我们来了解一下实现一个npm包需要包含哪些内容。打包通常我们把打包好的一些模块文件放在一个目录下便于统一进行加载是的npm包也是需要进行打包的虽然也能直接写npm包模块的代码并不推荐但我们经常会在项目中用到typescript、babel、eslint、代码压缩等等功能因此我们也需要对npm包进行打包后再进行发布。在深入对比Webpack、Parcel、Rollup打包工具中我们总结了rollup相比于webpack更适合打包一些第三方的类库因此本文主要通过rollup来进行打包。npm域级包随着npm包越来越多而且包名也只能是唯一的如果一个名字被别人占了那你就不能再使用这个名字假设我想要开发一个utils包但是张三已经发布了一个utils包那我的包名就不能叫utils了此时我们可以加一些连接符或者其他的字符进行区分但是这样就会让包名不具备可读性。在npm的包管理系统中有一种scoped packages机制用于将一些npm包以scope/package的命名形式集中在一个命名空间下面实现域级的包管理。域级包不仅不用担心会和别人的包名重复同时也能对功能类似的包进行统一的划分和管理比如我们用vue脚手架搭建的项目里面就有vue/cli-plugin-babel、vue/cli-plugin-eslint等等域级包。我们在初始化项目时可以使用命令行来添加scopenpm init --scopeusername相同域级范围内的包会被安装在相同的文件路径下比如node_modules/username/可以包含任意数量的作用域包安装域级包也需要指明其作用域范围npm install username/package在代码中引入时同样也需要作用域范围:require(username/package)加载规则在npm包中的package.json文件我们经常会看到main、jsnext:main、module、browser等字段那么这些字段都代表了什么意思呢其实这跟npm包的工作环境有关系我们知道npm包分为以下几种类型的包只能在浏览器端使用的只能在服务器端使用的浏览器/服务器端都可使用假如我们现在开发一个npm包既要支持浏览器端也要支持服务器端比如axios、lodash等需要在不同的环境下加载npm包的不同入口文件只通过一个字段已经不能满足需求。首先我们来看下main字段它是nodejs默认文件入口, 支持最广泛主要使用在引用某个依赖包的时候需要此属性的支持如果不使用main字段的话我们可能需要这样来引用依赖import(some-module/dist/bundle.js)所以它的作用是来告诉打包工具npm包的入口文件是哪个打包时让打包工具引入哪个文件这里的文件一般是commonjs(cjs)模块化的。有一些打包工具例如webpack或rollup本身就能直接处理import导入的esm模块那么我们可以将模块文件打包成esm模块然后指定module字段由包的使用者来决定如何引用。jsnext:main和module字段的意义是一样的都可以指定esm模块的文件但是jsnext:main是社区约定的字段并非官方而module则是官方约定字段因此我们经常将两个字段同时使用。在Webpack配置全解析中我们介绍到mainFields就是webpack用来解析模块的默认会按照顺序解析browser、module、main字段。有时候我们还想要写一个同时能够跑在浏览器端和服务器端的npm包比如axios但是两者在运行环境上还是有着细微的区别比如浏览器请求数据用的是XMLHttpRequest而服务器端则是http或者https那么我们要怎样来区分不同的环境呢除了我们可以在代码中对环境参数进行判断比如判断XMLHttpRequest是否为undefined也可以使用browser字段在浏览器环境来替换main字段。browser的用法有以下两种如果browser为单个的字符串则替换main成为浏览器环境的入口文件一般是umd模块的{browser: ./dist/bundle.umd.js
}browser还可以是一个对象来声明要替换或者忽略的文件这种形式比较适合替换部分文件不需要创建新的入口。key是要替换的module或者文件名右侧是替换的新的文件比如在axios的packages.json中就用到了这种替换{browser: {./lib/adapters/http.js: ./lib/adapters/xhr.js}
}打包工具在打包到浏览器环境时会将引入来自./lib/adapters/http.js的文件内容替换成./lib/adapters/xhr.js的内容。在有一些包中我们还会看到types字段指向types/index.d.ts文件这个字段是用来包含了这个npm包的变量和函数的类型信息比如我们在使用lodash-es包的时候有一些函数的名称想不起来了只记得大概的名字比如输入fi就能自动在编译器中联想出fill或者findIndex等函数名称这就为包的使用者提供了极大的便利不需要去查看包的内容就能了解其导出的参数名称为用户提供了更加好的IDE支持。发布哪些文件在npm包中我们可以选择哪些文件发布到服务器中比如只发布压缩后的代码而过滤源代码我们可以通过配置文件来进行指定可以分为以下几种情况存在.npmignore文件以.npmignore文件为准在文件中的内容都会被忽略不会上传即使有.gitignore文件也不会生效。不存在.npmignore文件以.gitignore文件为准一般是无关内容例如.vscode等环境配置相关的。不存在.npmignore也不存在.gitignore所有文件都会上传。package.json中存在files字段可以理解为files为白名单。ignore相当于黑名单files字段就是白名单那么当两者内容冲突时以谁为准呢答案是files为准它的优先级最高。我们可以通过npm pack命令进行本地模拟打包测试在项目根目录下就会生成一个tgz的压缩包这就是将要上传的文件内容。项目依赖在package.json文件中所有的依赖包都会在dependencies和devDependencies字段中进行配置管理dependencies表示生产环境下的依赖管理--save 简写 -SdevDependencies表示开发环境下的依赖管理--save-dev 简写 -Ddependencies字段指定了项目上线后运行所依赖的模块可以理解为我们的项目在生产环境运行中要用到的东西比如vue、jquery、axios等项目上线后还是要继续使用的依赖。devDependencies字段指定了项目开发所需要的模块开发环境会用到的东西比如webpack、eslint等等我们打包的时候会用到但是项目上线运行时就不需要了所以放到devDependencies中去就好了。除了dependencies和devDependencies字段我们在一些npm包中还会看到peerDependencies字段没有写过npm插件的童鞋可能会对这个字段比较陌生它和上面两个依赖有什么区别呢假设我们的项目MyProject有一个依赖PackageA它的package.json中又指定了对PackageB的依赖因此我们的项目结构是这样的MyProject
|- node_modules|- PackageA|- node_modules|- PackageB那么我们在MyProject中是可以直接引用PackageA的依赖的但如果我们想直接使用PackageB那对不起是不行的即使PackageB已经被安装了但是node只会在MyProject/node_modules目录下查找PackageB。为了解决这样问题peerDependencies字段就被引入了通俗的解释就是如果你安装了我你最好也安装以下依赖。比如上面如果我们在PackageA的package.json中加入下面代码{peerDependencies: {PackageB: 1.0.0}
}这样如果你安装了PackageA那会自动安装PackageB会形成如下的目录结构MyProject
|- node_modules|- PackageA|- PackageB我们在MyProject项目中就能愉快的使用PackageA和PackageB两个依赖了。比如我们熟悉的element-plus组件库它本身不可能单独运行必须依赖于vue3环境才能运行因此在它的package.json中我们看到它对宿主环境的要求{peerDependencies: {vue: ^3.2.0},
}这样我们看到它在组件中引入的vue的依赖其实都是宿主环境提供的vue3依赖import { ref, watch, nextTick } from vue许可证license字段使我们可以定义适用于package.json所描述代码的许可证。同样在将项目发布到npm注册时这非常重要因为许可证可能会限制某些开发人员或组织对软件的使用。拥有清晰的许可证有助于明确定义该软件可以使用的术语。借用知乎上Max Law的一张图来解释所有的许可证许可证版本号npm包的版本号也是有规范要求的通用的就是遵循semver语义化版本规范版本格式为major.minor.patch每个字母代表的含义如下主版本号(major)当你做了不兼容的API修改次版本号(minor)当你做了向下兼容的功能性新增修订号(patch)当你做了向下兼容的问题修正先行版本号是加到修订号的后面作为版本号的延伸当要发行大版本或核心功能时但不能保证这个版本完全正常就要先发一个先行版本。先行版本号的格式是在修订版本号后面加上一个连接号-再加上一连串以点.分割的标识符标识符可以由英文、数字和连接号[0-9A-Za-z-]组成。例如1.0.0-alpha
1.0.0-alpha.1
1.0.0-0.3.7常见的先行版本号有alpha不稳定版本一般而言该版本的Bug较多需要继续修改是测试版本beta基本稳定相对于Alpha版已经有了很大的进步消除了严重错误rc和正式版基本相同基本上不存在导致错误的Bugrelease最终版本版本号每个npm包的版本号都是唯一的我们每次更新npm包后都是需要更新版本号否则会报错提醒版本号报错❝当主版本号升级后次版本号和修订号需要重置为0次版本号进行升级后修订版本需要重置为0。❞但是如果每次都要手动来更新版本号那可就太麻烦了那么是否有命令行能来自动更新版本号呢由于版本号的确定依赖于内容决定的主观性的动作因此不能完全做到全自动化更新谁知道你是改了大版本还是小版本因此只能通过命令行实现半自动操作命令的取值和语义化的版本是对应的会在相应的版本上加1命令行更新版本号在package.json的一些依赖的版本号中我们还会看到^、~或者这样的标识符或者不带标识符的这都代表什么意思呢没有任何符号完全百分百匹配必须使用当前版本号对比符号类的(大于) (大于等于) (小于) (小于等于)波浪符号~固定主版本号和次版本号修订号可以随意更改例如~2.0.0可以使用 2.0.0、2.0.2 、2.0.9 的版本。插入符号^固定主版本号次版本号和修订号可以随意更改例如^2.0.0可以使用 2.0.1、2.2.2 、2.9.9 的版本。任意版本*对版本没有限制一般不用或符号||可以用来设置多个版本号限制规则例如 3.0.0 || 1.0.0npm包开发通过上面对package.json的介绍相信各位小伙伴已经对npm包有了一定的了解现在我们就进入代码实操阶段开发并上传一个npm包。工具类包相信不少童鞋在业务开发时都会遇到重复的功能或者开发相同的工具函数每次遇到时都要去其他项目中拷贝代码如果一个项目的代码逻辑有优化的地方需要同步到其他项目则需要再次挨个项目的拷贝代码这样不仅费时费力而且还重复造轮子。我们可以整合各个项目的需求开发一个适合自己项目的工具类的npm包包的结构如下hello-npm
|-- lib/存放打包后的文件
|-- src/源码
|-- package.json
|-- rollup.config.base.jsrollup基础配置
|-- rollup.config.dev.jsrollup开发配置
|-- rollup.config.jsrollup正式配置
|-- README.md
|-- tsconfig.json首先看下package.json的配置rollup根据开发环境区分不同的配置{name: hello-npm,version: 1.0.0,description: 我是npm包的描述,main: lib/bundle.cjs.js,jsnext:main: lib/bundle.esm.js,module: lib/bundle.esm.js,browser: lib/bundle.browser.js,types: types/index.d.ts,author: ,scripts: {dev: npx rollup -wc rollup.config.dev.js,build: npx rollup -c rollup.config.js npm run build:types,build:types: npx tsc,},license: ISC
}然后配置rollup的base config文件import typescript from rollup/plugin-typescript;
import pkg from ./package.json;
import json from rollup-plugin-json;
import resolve from rollup-plugin-node-resolve;
import commonjs from rollup/plugin-commonjs;
import eslint from rollup/plugin-eslint;
import { babel } from rollup/plugin-babel
const formatName hello;
export default {input: ./src/index.ts,output: [{file: pkg.main,format: cjs,},{file: pkg.module,format: esm,},{file: pkg.browser,format: umd,name: formatName,},],plugins: [json(),commonjs({include: /node_modules/,}),resolve({preferBuiltins: true,jsnext: true,main: true,brower: true,}),typescript(),eslint(),babel({ exclude: node_modules/** }),],
};这里我们将打包成commonjs、esm和umd三种模块规范的包然后是生产环境的配置加入terser和filesize分别进行压缩和查看打包大小import { terser } from rollup-plugin-terser;
import filesize from rollup-plugin-filesize;import baseConfig from ./rollup.config.base;export default {...baseConfig,plugins: [...baseConfig.plugins, terser(), filesize()],
};然后是开发环境的配置import baseConfig from ./rollup.config.base;
import serve from rollup-plugin-serve;
import livereload from rollup-plugin-livereload;export default {...baseConfig,plugins: [...baseConfig.plugins,serve({contentBase: ,port: 8020,}),livereload(src),],
};环境配置好后我们就可以打包了# 测试环境
npm run dev
# 生产环境
npm run build全局包还有一类npm包比较特殊是通过npm i -g [pkg]进行全局安装的比如常用的vue create、static-server、pm2等命令都是通过全局命令安装的那么全局npm包如何开发呢我们来实现一个全局命令的计算器功能新建一个项目然后运行cd my-calc
npm init -y在package.json中添加bin属性它是一个对象键名是告诉node在全局定义一个全局的命令值则是执行命令的脚本文件路径可以同时定义多个命令这里我们定义一个calc命令{name: my-calc,version: 1.0.0,description: ,main: index.js,scripts: {test: echo \Error: no test specified\ exit 1},bin: {calc: ./src/calc.js,},license: ISC,
}命令定义好了我们来实现calc.js中的内容#!/usr/bin/env nodeif (process.argv.length 2) {console.log(请输入运算的数字);return;
}let total process.argv.slice(2).map((el) {let parseEl parseFloat(el);return !isNaN(parseEl) ? parseEl : 0;}).reduce((total, num) {total num;return total;}, 0);console.log(运算结果${total});需要注意的是文件头部的#!/usr/bin/env node是必须的告诉node这是一个可执行的js文件如果不写会报错然后通过process.argv.slice(2)来获取执行命令的参数前两个参数分别是node的运行路径和可执行脚本的运行路径第三个参数开始才是命令行的参数因此我们在命令行运行来看结果calc 1 2 3 -4如果我们的脚本比较复杂想调试一下脚本那么每次都需要发布到npm服务器然后全局安装后才能测试这样比较费时费力那么有没有什么方法能够直接运行脚本呢这里就要用到npm link命令它的作用是将调试的npm模块链接到对应的运行项目中去我们也可以通过这个命令把模块链接到全局。在我们的项目中运行命令npm link可以看到全局npm目录下新增了calc文件calc命令就指向了本地项目下的calc.js文件然后我们就可以尽情的运行调试调试完成后我们又不需要将命令指向本地项目了这个时候就需要下面的命令进行解绑操作npm unlink解绑后npm会把全局的calc文件删除这时候我们就可以去发布npm包然后进行真正的全局安装了。vue组件库在Vue项目中我们在很多项目中也会用到公共组件可以将这些组件提取到组件库我们可以仿照element-ui来实现一个我们自己的ui组件库首先来构建我们的项目目录|- lib
|- src|- MyButton|- index.js|- index.vue|- index.scss|- MyInput|- index.js|- index.vue|- index.scss|- main.js
|- rollup.config.js我们构建MyButton和MyInput两个组件vue文件和scss不再赘述我们来看下导出组件的index.jsimport MyButton from ./index.vue;MyButton.install function (Vue) {Vue.component(MyButton.name, MyButton);
};
export default MyButton;组件导出后在main.js中统一组件注册import MyButton from ./MyButton/index.js;
import MyInput from ./MyInput/index;
import { version } from ../package.json;import ./MyButton/index.scss;
import ./MyInput/index.scss;const components [MyButton, MyInput];const install function (Vue) {components.forEach((component) {Vue.component(component.name, component);});
};
if (typeof window ! undefined window.Vue) {install(window.Vue);
}
export { MyButton, MyInput, install };
export default { version, install };然后配置rollup.config.jsimport resolve from rollup-plugin-node-resolve;
import vue from rollup-plugin-vue;
import babel from rollup/plugin-babel;
import commonjs from rollup/plugin-commonjs;
import scss from rollup-plugin-scss;
import json from rollup/plugin-json;const formatName MyUI;
const config {input: ./src/main.js,output: [{file: ./lib/bundle.cjs.js,format: cjs,name: formatName,exports: auto,},{file: ./lib/bundle.js,format: iife,name: formatName,exports: auto,},],plugins: [json(),resolve(),vue({css: true,compileTemplate: true,}),babel({exclude: **/node_modules/**,}),commonjs(),scss(),],
};
export default config;这里我们打包出commonjs和iife两个模块规范一个可以配合打包工具使用另一个可以直接在浏览器中script引入。我们通过rollup-plugin-vue插件来解析vue文件需要注意的是5.x版本解析vue2最新的6.x版本解析vue3默认安装6.x版本如果我们使用的是vue2则需要切换老版本的插件还需要安装以下vue的编译器npm install --save-dev vue-template-compiler打包成功后我们就能看到lib目录下的文件了我们就能像element-ui一样愉快的使用自己的ui组件了在项目中引入我们的UI/* 全局引入 main.js */
import MyUI from my-ui;
// 引入样式
import my-ui/lib/bundle.cjs.css;Vue.use(MyUI);/* 在组件中按需引入 */
import { MyButton } from my-ui;
export default {components: {MyButton}
}如果想要在本地进行调试也可以使用link命令创建链接首先在my-ui目录下运行npm link将组件挂载到全局然后在vue项目中运行下面命令来引入全局的my-uinpm link my-ui我们会看到下面的输出表示vue项目中my-ui模块已经链接到my-ui项目了D:\project\vue-demo\node_modules\my-ui
-
C:\Users\XXXX\AppData\Roaming\npm\node_modules\my-ui
-
D:\project\my-uinpm包发布我们的npm包完成后就可以准备发布了首先我们需要准备一个账号可以使用--registry来指定npm服务器或者直接使用nrm来管理npm adduser
npm adduser --registryhttp://example.com然后进行登录输入你注册的账号密码邮箱npm login还可以用下面命令退出当前账号npm logout如果不知道当前登录的账号可以用who命令查看身份npm who am i登录成功就可以将我们的包推送到服务器上去了执行下面命令会看到一堆的npm noticenpm publish如果某版本的包有问题我们还可以将其撤回npm unpublish [pkg][version]················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时最近组织了源码共读活动帮助3000前端人学会看源码。公众号愿景帮助5年内前端人走向前列。识别上方二维码加我微信、拉你进源码共读群今日话题略。分享、收藏、点赞、在看我的文章就是对我最大的支持~
