网站建设公司上海站霸,如何建立营销网络,企业文化形象墙设计,电子网站建设维护一、代码共享方案
npm 进行发布上传 npmregistrynpm 进行安装
二、npm 包管理工具
2.1 介绍 安装 node 的时候自动安装 node package manager#xff1a;Node 包管理工具 可以通过 npm 安装说明已经上传到这个仓库里面了 npm 官网查看是否有发布#xff1a;npmjs.org …一、代码共享方案
npm 进行发布上传 npmregistrynpm 进行安装
二、npm 包管理工具
2.1 介绍 安装 node 的时候自动安装 node package managerNode 包管理工具 可以通过 npm 安装说明已经上传到这个仓库里面了 npm 官网查看是否有发布npmjs.org
2.2 npm的配置文件
package.json记录着项目的名称、版本号、项目描述项目所依赖的其他库的npm init自动生成 package.json手动从零开始创建项目npm init -y:所有东西都是yes通过脚手架创建项目vue create shopping会搭建好这个项目所需要配置的东西包括 package.json
2.3 常见的属性 name项目的名称 version项目版本 description描述 author作者 license开源协议 privatetrue npm不能发布它防止私有项目或模块发布出去的方式main属性设置程序的入口 script配置脚本命令npm run xxx start、test、stop、restart可以省略run dependencies开发和生产环境都需要依赖的包npm i axios devDependencies开发依赖有一些包在生成环境是不需要的比如webpack、babel、vue-loader 这个时候通过npm install webpack --save-dev安装到devDependencies属性中 简写npm install webpack -D peerDependencies对等依赖你依赖的一个包它必须是以另外一个宿主包为前提的 element-plus必须安装vue engines指定 Node 和NPM 的版本号 browserslist浏览器兼容情况
2.4 semver版本规范
X.Y.ZX主版本号可能不兼容之前的版本发生了重大版本更新 vue3 不兼容 vue2 版本的一些 api Y次版本号增加了新特性和新功能但是兼容之前的版本Z修订号没有新功能修正了之前的bugx.y.z明确的版本号^x.y.zx 是保持不变的y 和 z 永远安装最新的版本后面两者动态~x.y.zx 和y 是保持不变的 z 永远安装最新的版本
2.5 npm install 命令 本地/局部安装在哪个文件夹就安装到哪个文件夹里面不会添加到环境变量里面 会在当前目录下生成一个node_modules文件夹又分为 开发依赖 -D生产依赖 全局安装npm i webpack -g 必须依赖 webpack-cli -g一般安装的都是工具包yarn、webpack 原理 从 远程registry 中进行下载若本地两个仓库都有 axios存在缓存的概念通过算法去找对应的包》标识符integrity 在package-lock.json中 package-lock.json确定死的版本一般不修改 name项目的名称version项目的版本lockfileVersionlock文件的版本requires使用requires来跟踪模块的依赖关系dependencies项目的依赖 卸载某个包npm uninstall webpack npm ininstall axios -D 强制重新buildnpm rebuild 清除缓存npm cache clean
2.6 npm 发布自己的开发包
编写自己的工具/库/框架必须包含 package.json除了在github也可以发布在registry步骤 注册npm账号 https://www.npmjs.com在vscode里面登录npm login修改 package.json发布到 npm registry上npm publish更新仓库 修改版本号最好符合 semver 规范重新发布 删除发布的包npm unpublish让发布的包过期npm deprecate
三、 yarn 工具 早期的 npm 存在安装依赖速度缓慢、版本依赖混乱等问题 npm5 之后进行很多升级和改进 npm i yarn -g 初始化yarn init 安装包yarn add axios 与npm 区别
四、cnpm工具
registry 是国外的服务器淘宝的镜像服务器十分钟更新一次进行备份查看npm镜像npm config get registry设置npm的镜像npm config set registryhttps://registry.npm.taobao.org安装一个新的工具npm install cnpm -g设置cnpm的镜像cnpm config set registryhttps://registry.npm.taobao.org
五、npx工具 npx是 npm5.2之后自带的一个命令 在安装项目之前先创建package.json 手动创建npm init -ynpm i webpack-cli -D开发依赖打包在里面script执行命令优先在modules的bin里面找全局安装webpacknpm i webpack3.6.0 -g 使用 npx 直接优先在node_modules下面的bin文件中优先查找 webpack 对源代码进行打包默认情况下运行全局的 局部命令的执行 必须进入到目录在终端使用如下命令 ./node_modules/.bin/webpack --version修改scripts脚本“webpack”: “webpack --version”使用npxnpx webpack --version
六、pnpm 使用和原理 performant 高性能的 npm 快速/高效/严格/支持 monorepos /严格速度快、节省磁盘空间 vue 源码已经开始使用 pnpm 了 使用的公司Microsoft、ByteDance 依赖包将被存放在一个统一的位置 同一依赖包使用相同的版本磁盘上只有依赖包这一份文件同一依赖包需要使用不同的版本仅有版本之间不同的文件会被存储起来所有文件都保存在硬盘上的统一的位置 建立硬链接不会占用额外的硬盘空间 pnpm 创建非扁平的 node_modules目录873 安装npm install pnpm -g 当使用npm或yarn安装依赖包时所有软件包都将被提升到node_modules的根目录下 a. 源码可以访问本不属于当前项目所设定的依赖包 通过硬链接和软连接的方式连接起来 整个结构嵌套的层级有点多,不会随便引入非自己安装的依赖pnpm的存储store 获取对应目录pnpm store path 从store中删除当前未被引用的包来释放store的空间pnpm store prune
七、硬链接/软连接
硬链接电脑文件系统中的多个文件平等地享有同一个文件存储单元符号链接一种特殊的文件包含有一条绝对/相对路径指向其他文件或者目录的引用copy aaa.js ffff.js----------文件拷贝 会在硬盘中复制出来一份新的文件数据 mklink /H bbb.js aaa.js----------建立了硬链接 bbb.js 新文件aaa.js原文件指向了磁盘中的同一份数据只能操作文件 mklink aaa.js hhh.js-------建立软连接 快捷方式找到原文件再找到磁盘中的数据
