前端工程化开发（五）—— 包管理工具总结

76433橘子
282 阅读4分钟

前端工程化开发（五）

npx 的基本使用

  • 首先在进行安装我们的 npm 依赖包的时候，是含有全局安装的特性的
  • 但是如果说想要直接使用我们的依赖包，我们默认使用的是我们的全局的已经存在的依赖包
  • 但是我们的 npx 可以是实现的是我们的使用在本次开发项目中的存在的 npm 包
  • 这个时候，我们使用 npx 可以实现的是直接调用我们的本次项目环境中存在于 node_modules 中的包名
  • 官网的介绍就是：npx 用于实现的是我们个人可以使用关于本次项目中的包，不是使用的是我们全局安装的包名
  • npx 的官网介绍文档阅读（科学上网会快一点的）

npm 发布属于自己的包

  • npm login

  • npm publish

    • 实现的是发布自己的包

    • 但是注意发布自己的包需要注意些什么？？？

      • 第一点： 项目配置了关于 package.json
      • 第二点： 该文件配置了项目的名称，版本号，作者名，开源协议名
      • {
  "name": "demo_practise",
  "version": "1.0.0",
  "description": "a demo dir",
  "main": "main.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "npx webpack",
    "start": "node src/index.js"
  },
  "dependencies": {
  },
  "devDependencies": {
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4"
  },
  "keywords": [
    "demo"
  ],
  "author": "juwenzhang",
  "license": "ISC"
}

  • 这样操作后就可以实现发布属于自己的第一个包了

  • 发布成功后，我们只要进行：

    • npm install demo_practise 即可

  • 后期的如果还希望可以实现发布

    • 这个时候我们需要进行实现的是就是我们的更新我们的版本号
    • 然后在进行重新打包发布即可

  • 我们同时还是可以进行删除发布的包的

    • npm unpublish

  • 让我们发布过的包直接过期

    • npm deprecate

image-20241204221858091.png

image-20241204221811055.png

image-20241204221923851.png

总结

  • 我们通过这几天的前端工程化的开发中，我们了解了前端工程化开发中的不同的包管理工具

    • npm 安装了 Node 默认存在的一种包管理工具

    • pnpm 需要使用 npm 进行全局安装的才可以使用的包管理工具

    • cnpm 需要使用 npm 进行全局安装才可以使用的包管理工具

    • yarn 需要使用 npm 进行全局安装才可以使用的 包管理工具

      • npm install pnpm cnpm yarn -g

    • npx 实现的是指定我们使用本次项目中的依赖包

  • 同时注意我们需要熟悉如何实现配置我们的 package.json ，这是我们的工程化开发的一个十分重要的文件

    • 与之对应的文件是我们的 package-lock.json 文件

      • 该文件就是实现的是将我们依赖包的版本进行锁定

    • 理解什么是开发依赖，什么是生产依赖

    • 开发依赖使用我们的 npm install 开发依赖包名 --save-dev | npm install 开发依赖包 -D

      • 后面我们为自己的个人项目配置的一些关于 babel webpack stylelint husky prettier eslint
      • 这类和我们的生产书写代码实现的时候使用的是依赖包都是安装在的我们的开发环境中的

    • vue react angular element-plus ant design dataV

      • 是我们在生产代码的时候需要使用得到的依赖包，这个时候，我们就需要使用的是生产依赖安装
      • npm isntall 依赖包名 --save | npm install 依赖包名

  • 如果后期我们接收别人的一个项目的时候，我们就可以实现的是

    • 根据别人的 package.json 的配置文件来实现我们的安装依赖包
    • npm install 默认的实现安装我们所需的依赖包

  • 同时我们的一个协同开发的时候，我们可以实现使用的就是我们的

    • 通过 git 实现拉取别人的项目下来
    • 同时我们的还具有的一个重要的文件就是我们的 .gitignore 文件
    • 该文件实现的是配置我们的那些包上传 git 仓库的时候忽略上传
    • .idea .vscode node_modules 等等文件目录都是需要我们忽略上传的
avatar
文章
阅读
粉丝