当前位置：首页 > news >正文

手机网站建设的公司排名网站建设网络

news 2026/4/28 6:01:18

手机网站建设的公司排名,网站建设网络,樟树市城乡规划建设局网站,linode安装wordpress代码共享方案在我们通过模块化的方式将代码划分成一个个小的结构后#xff0c;在以后的开发中我们就可以通过模块化的方式来封装自己的代码#xff0c;并且封装成一个工具#xff0c;这个工具我们可以让同事通过导入的方式来使用#xff0c;甚至你可以分享给世界各地的程…代码共享方案在我们通过模块化的方式将代码划分成一个个小的结构后在以后的开发中我们就可以通过模块化的方式来封装自己的代码并且封装成一个工具这个工具我们可以让同事通过导入的方式来使用甚至你可以分享给世界各地的程序员来使用。这时候有的人会考虑一个问题如果我们分享给世界上所有的程序员使用有哪些方式呢方式一上传到GitHub上、其他程序员通过GitHub下载我们的代码手动的引用缺点是大家必须知道你的代码GitHub的地址并且从GitHub上手动下载需要在自己的项目中手动的引用并且管理相关的依赖不需要使用的时候需要手动来删除相关的依赖当遇到版本升级或者切换时需要重复上面的操作显然上面的方式是有效的但是这种传统的方式非常麻烦并且容易出错方式二使用一个专业的工具来管理我们的代码我们通过工具将代码发布到特定的位置其他程序员直接通过工具来安装、升级、删除我们的工具代码显然通过第二种方式我们可以更好的管理自己的工具包其他人也可以更好的使用我们的工具包。包管理工具npm 这个我们都不陌生用得最多的也就是这个 Node Package Manager也就是Node包管理器但是目前已经不仅仅是Node包管理器了在前端项目中我们也在使用它来管理依赖的包比如vue、vue-router、vuex、express、koa、react、react-dom、axios、babel、webpack等等如何下载npm工具呢 npm属于node的一个管理工具所以我们需要先安装Nodenode管理工具https://nodejs.org/en/ npm管理的包可以在哪里查看、搜索呢 https://www.npmjs.org/这是我们安装相关的npm包的官网 npm管理的包存放在哪里呢我们发布自己的包其实是发布到registry上面的当我们安装一个包时其实是从registry上面下载的包 npm的配置文件那么对于一个项目来说我们如何使用npm来管理这么多包呢事实上我们每一个项目都会有一个对应的配置文件无论是前端项目Vue、React还是后端项Node这个配置文件会记录着你项目的名称、版本号、项目描述等也会记录着你项目所依赖的其他库的信息和依赖库的版本号这个配置文件就是package.json 那么这个配置文件如何得到呢方式一手动从零创建项目npm init –y方式二通过脚手架创建项目脚手架会帮助我们生成package.json并且里面有相关的配置常见的配置文件 npm init #创建时填写信息npm init -y # 所有信息使用默认的 Vue CLI4创建的Vue3项目 create-react-app创建的react17项目常见的属性必须填写的属性name、version name是项目的名称version是当前项目的版本号description是描述信息很多时候是作为项目的基本描述author是作者相关信息发布时用到license是开源协议发布时用到 private属性 private属性记录当前的项目是否是私有的当值为true时npm是不能发布它的这是防止私有项目或模块发布出去的方式 main属性设置程序的入口。很多人会有疑惑webpack不是会自动找到程序的入口吗这个入口和webpack打包的入口并不冲突它是在你发布一个模块的时候会用到的比如我们使用axios模块 const axios require(‘axios’);实际上是找到对应的main属性查找文件的 scripts属性 scripts属性用于配置一些脚本命令以键值对的形式存在配置后我们可以通过 npm run 命令的key来执行这个命令npm start和npm run start的区别是什么它们是等价的对于常用的 start、 test、stop、restart可以省略掉run直接通过 npm start等方式运行 dependencies属性 dependencies属性是指定无论开发环境还是生成环境都需要依赖的包通常是我们项目实际开发用到的一些库模块vue、vuex、vue-router、react、react-dom、axios等等与之对应的是devDependencies devDependencies属性一些包在生成环境是不需要的比如webpack、babel等这个时候我们会通过 npm install webpack --save-dev将它安装到devDependencies属性中 peerDependencies属性还有一种项目依赖关系是对等依赖也就是你依赖的一个包它必须是以另外一个宿主包为前提的比如element-plus是依赖于vue3的ant design是依赖于react、react-dom engines属性 engines属性用于指定Node和NPM的版本号在安装的过程中会先检查对应的引擎版本如果不符合就会报错事实上也可以指定所在的操作系统 “os” : [ “darwin”, “linux” ]只是很少用到 browserslist属性用于配置打包后的JavaScript浏览器的兼容情况参考否则我们需要手动的添加polyfills来让支持某些语法也就是说它是为webpack等打包工具服务的一个属性依赖的版本管理我们会发现安装的依赖版本出现^2.0.3或~2.0.3这是什么意思呢 npm的包通常需要遵从semver版本规范 semverhttps://semver.org/lang/zh-CN/npm semverhttps://docs.npmjs.com/misc/semver semver版本规范是X.Y.Z X主版本号major当你做了不兼容的 API 修改可能不兼容之前的版本Y次版本号minor当你做了向下兼容的功能性新增新功能增加但是兼容之前的版本Z修订号patch当你做了向下兼容的问题修正没有新功能修复了之前版本的bug 我们这里解释一下 ^和~的区别 ^x.y.z表示x是保持不变的y和z永远安装最新的版本~x.y.z表示x和y保持不变的z永远安装最新的版本 npm install 命令安装npm包分两种情况全局安装global install npm install webpack -g;项目局部安装local install npm install webpack 全局安装全局安装是直接将某个包安装到全局比如yarn的全局安装 npm install webpack -g但是很多人对全局安装有一些误会通常使用npm全局安装的包都是一些工具包yarn、webpack等并不是类似于 axios、express、koa等库文件所以全局安装了之后并不能让我们在所有的项目中使用 axios等库项目安装项目安装会在当前目录下生产一个 node_modules 文件夹我们之前讲解require查找顺序时有讲解过这个包在什么情况下被查找局部安装分为开发时依赖和生产时依赖 # 安装开发和生产依赖 npm install axios npm i axios # 开发依赖 npm install webpack --save-dev npm install webpack -D npm i webpack –D # 根据package.json中的依赖包 npm installnpm install 原理大家之前应该已经会了 npm install 但是你是否思考过它的内部原理呢执行 npm install它背后帮助我们完成了什么操作我们会发现还有一个成为package-lock.json的文件它的作用是什么从npm5开始npm支持缓存策略来自yarn的压力缓存有什么作用呢这是一幅画出的根据 npm install 的原理图 npm install 原理图解析 npm install会检测是有package-lock.json文件没有lock文件分析依赖关系这是因为我们可能包会依赖其他的包并且多个包之间会产生相同依赖的情况从registry仓库中下载压缩包如果我们设置了镜像那么会从镜像服务器下载压缩包获取到压缩包后会对压缩包进行缓存从npm5开始有的将压缩包解压到项目的node_modules文件夹中前面我们讲过require的查找顺序会在该包下面查找有lock文件检测lock中包的版本是否和package.json中一致会按照semver版本规范检测不一致那么会重新构建依赖关系直接会走顶层的流程一致的情况下会去优先查找缓存没有找到会从registry仓库下载直接走顶层流程查找到会获取缓存中的压缩文件并且将压缩文件解压到node_modules文件夹中 package-lock.json package-lock.json文件解析 name项目的名称version项目的版本lockfileVersionlock文件的版本requires使用requires来跟踪模块的依赖关系dependencies项目的依赖当前项目依赖axios但是axios依赖follow-redireactsaxios中的属性如下 version表示实际安装的axios的版本resolved用来记录下载的地址registry仓库中的位置requires记录当前模块的依赖integrity用来从缓存中获取索引再通过索引去获取压缩包文件 yarn工具另一个node包管理工具yarn yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具yarn 是为了弥补 npm 的一些缺陷而出现的早期的npm存在很多的缺陷比如安装依赖速度很慢、版本依赖混乱等等一系列的问题虽然从npm5版本开始进行了很多的升级和改进但是依然很多人喜欢使用yarn cnpm工具由于一些特殊的原因某些情况下我们没办法很好的从 https://registry.npmjs.org下载下来一些需要的包。查看npm镜像npm config get registry 我们可以直接设置npm的镜像npm config set registry 但是对于大多数人来说比如我并不希望将npm镜像修改了第一不太希望随意修改npm原本从官方下来包的渠道第二担心某天淘宝的镜像挂了或者不维护了又要改来改去这个时候我们可以使用cnpm并且将cnpm设置为淘宝的镜像 npm install -g cnpm --registryhttps://registry.npm.taobao.orgcnpm config get registry # https://r.npm.taobao.org/ npx工具 npx是npm5.2之后自带的一个命令。 npx的作用非常多但是比较常见的是使用它来调用项目中的某个模块的指令。我们以webpack为例全局安装的是webpack5.1.3 项目安装的是webpack3.6.0 如果我在终端执行 webpack --version使用的是哪一个命令呢显示结果会是 webpack 5.1.3事实上使用的是全局的为什么呢原因非常简单在当前目录下找不到webpack时就会去全局找并且执行命令如何解决这个问题呢那么如何使用项目局部的webpack常见的是一下几种方式方式一明确查找到node_module下面的webpack—./node_modules/.bin/webpack --version方式二在 scripts定义脚本来执行webpack “scripts”: {“webpack”: “webpack --version”}方式三使用npx----npx webpack --version npm发布自己的包注册npm账号 https://www.npmjs.com/选择sign up 在命令行登录npm login 修改package.json 发布到npm registry上更新仓库 1.修改版本号(最好符合semver规范)2.重新发布

查看全文

http://www.hkea.cn/news/14444630/