某企业网站建设方案,中华室内设计官网,代理商门户网站开发,自助建站系统破解版1#xff0c;了解工程化管理核心
1.1 nodejs
理解#xff1a;
在前端工程化发展中#xff0c;nodejs的出现让前端开始了工程化#xff0c;结束了仅静态页和切图的工作。他为前端提供了一个运行环境#xff0c;让前端彻底变成了一个单独的工程#xff0c;可以运行、编译…1了解工程化管理核心
1.1 nodejs
理解
在前端工程化发展中nodejs的出现让前端开始了工程化结束了仅静态页和切图的工作。他为前端提供了一个运行环境让前端彻底变成了一个单独的工程可以运行、编译、构建打包等。 版本管理
不同的前端项目可能使用不同的nodejs版本开发因此nodejs的版本管理通常使用nvmhttps://github.com/nvm-sh/nvm和nhttps://www.npmjs.com/package/n。
二者区别是n是一个npm包他必须要在node环境中才能安装运行而nvm可以在window和mac下使用同时多窗口使用n全局的node版本都会跟着改变而nvm在不同的终端窗口可以保持不同的版本。因此大部分情况下都是使用nvm来进行版本管理。 1.2 npm
理解
npmNode Package Manager是主要用来进行包管理的工具。以前的项目如果用到一个插件需要直接复制文件夹到另一个项目但是npm将插件保存到远程仓库registry在新项目复用的时候直接通过npm install下载安装到当前项目的node_modules目录下进行引用。他将包的信息等都存到package.json文件中同时该配置文件也存了一些关于项目命令等其他信息。 淘宝镜像源
因为npm是从国外服务器下载因此会有下载慢的问题因此淘宝团队搭建了一个国内的镜像每10分钟一同步。而我们开发者就可以设置淘宝镜像源来提高下载速度。
npm config set registry https://registry.npm.taobao.org 1.3 yarn
理解
npm包管理工具存在很多问题比如下载慢版本管理不严格导致每台机器上的依赖库版本补丁不一致npm嵌套关系较深等。因此会衍生出很多新的包管理工具例如yarn。
yarn的提出主要是为了解决npm中补丁版本不一致的问题使用yarn.lock文件固定了安装的版本号且在安装时采用并行安装的方式提高了依赖包的安装速度。而后续npm也模仿他加了package-lock.json这一相同功能 使用 1下载yarn npm install -g yarn (可以用yarn -v 检测是否安装成功) [设置淘宝镜像yarn config set registry https://registry.npmmirror.com/ ] 2安装依赖 yarn 3安装具体依赖包 yarn add 包名 4删除具体依赖包 yarn remove 包名 5启动项目 yarn serve比npm少了一个run 注意
yarn与npm不要混合使用二者尽量只选择一个 1.4 pnpm
理解
占用磁盘空间更小下载速度更快支持monorepos解决了前端项目臃肿和分工合作的问题支持用一个git仓库管理多个子项目例如Babel项目也在使用安装简单npm i -g pnpm替换npm和yarn的成本低。 使用 1安装pnpm npm install -g pnpm [设置淘宝镜像pnpm set registry https://registry.npm.taobao.org ] 2安装依赖 pnpm install 3安装具体依赖包 pnpm add 包名 4删除具体依赖包 pnpm remove 包名 5启动项目 pnpm run serve 1.5 依赖包版本号
版本号理解
每个依赖包的版本号都是1.2.3的形式对应的意义为主版本号、次版本号、修订版本号。 最优版本理解
默认情况npm install下载的都是最新版本版本号不是固定的而是最优版本。最优版本通常在版本号前面多一个 ^ 或者 ~ 符号。
符号^ 兼容某个大版本下载的包主版本不能变次版本和修订版本可以随意变
符号~ 兼容某个次版本下载包的主版本和次版本不能变修订版本可以随意变
示例
element-ui: ^2.15.8,
// 版本号可以是2.15.8、2.15.7、2.14.5等等 特点
最优版本就会导致多人开发会出现多个不同的版本但是就算使用固定版本锁死版本号但是无法保证依赖包的依赖包还是最优版本。 2package.json配置
必备属性只有两个 name - 项目名称 version - 项目版本 描述信息 description - 项目描述 keyword - 关键词 author - 作者 contributors - 贡献者与作者不同他是一个数组 homepage - 主页地址 repository - 仓库地址 bugs - 项目bug反馈地址 funding - 资金支持方式和链接 依赖配置 dependencies - 生产环境依赖他下面的依赖会跟随npm包被自动下载 devDependencies - 开发环境依赖本地开发阶段使用到的不会被自动下载例如webpack、eslint、vite、babel、scss-loader等辅助工具包 注当只开发项目不对外开源时放在dependencies和devDependencies中是一样的 peerDependencies - 同版本依赖简单理解就是依赖包A依赖了B依赖包C也依赖了B而将相同的依赖写在同版本依赖里可以保证共用同一个版本的依赖且避免重复安装 bundledDependencies - 捆绑依赖使用较少。参数是一个数组 engines - 具体环境node和npm版本例如engines: { node: 8.10.3 12.13.0, npm: 6.9.0 } 脚本配置 scripts - 脚本入口 config - 用来定义scripts运行时的配置参数例如config: { NODE_ENV: development } 文件目录 main - 指定加载的入口文件没提供该属性则默认是根目录下的index.js browser - 定义npm包在browser环境下的入口文件 module非官方 - 定义npm包ESM规范的入口文件可以在browser环境和node环境使用 types非官方 - 定义typescript的类声明文件(.d.ts)的路径 files - 指定哪些包被推送到npm服务中参数为字符串数组 bin - 定义在全局安装时可执行的命令例如构建脚手架{ bin: cli.js } 发布配置 private - true或false防止将私有包发到npm仓库 preferGlobal非官方 - true或false为true表示建议你的包适合全局安装不适合作为项目依赖本地安装 publishConfig - 发布时的配置项合集eg{ tag: 1.0.0, registry: http://xxx, access: publick } os - 设置npm包在什么系统中使用在什么系统中禁用eg{ os: [darwin, linux] } // 适用的操作系统 { os [!win32] } // 禁用的操作系统 cpu - 和OS配置类似更准确的限制用户的安装环境egcpu [x64, AMD64] // 适用的cpu license - 指定软件的开源协议 MIT - 只要用户在项目副本中包含了版权声明和许可声明就可以拿代码做任何事情无需承担任何责任 Apache - 类似于 MIT 同时还包含了贡献者向用户提供专利授权相关的条款 GPL - 修改项目代码的用户再次分发源码或二进制代码时必须公布他的相关修改 第三方配置非官方 typings - 与main类似指定typescript的入口文件 eslintConfig - eslint的配置内容更推荐配置在.eslintrc文件中 babel - 指定Babel的配置内容更推荐配置在.babelrc文件中 unpkg - 基于CDN的前端包托管服务用于在浏览器中直接引用和加载 npm 上发布的包 browserslist - 告知支持哪些浏览器及版本egbrowserslist: [ not ie 8, last 2 versions, 1% ] 3package.json中的命令
npm run xx实际是运行scripts中配置的命令。 多个命令并行顺序执行使用符号
scripts: {start: 指令一 指令二 ...,
},
多个命令串行前面的成功才会执行后面使用符号
script: {start: 指令一 指令二 ...,
}, 4package-lock.json文件
概念
之前说package.json某个依赖可能不是具体的版本而package-lock.json则固定了每个依赖的具体版本和每个包之间的叠层关系。他会在npm install的时候自动生成 node_modules依赖包的主要组成部分 version - 依赖包版本号 resolved - 依赖包下载地址 intergrity - 表明完整性的hash值 dev - 该模块是否为顶级模块的依赖或者是一个的传递依赖关系 dependencices - 依赖包的依赖包 requires - 依赖包所需要的所有依赖项 engines - 具体环境同package.json一致 示例
node_modules/achrinza/node-ipc: {version: 9.2.2,resolved: https://registry.npmmirror.com/xxc-9.2.2.tgz,integrity: sha512-b90U39dx0cU......4ApNXnE3Tuo8xxxxx,dev: true,dependencies: {node-ipc/js-queue: 2.0.3,event-pubsub: 4.3.0,js-message: 1.0.7},engines: {node: 8 || 10 || 12 || 14 || 16 || 17}
},
