程序员必知的 yarn、npm 和 craco

介绍

在 JavaScript 领域， yarn、npm 和 craco 都是非常流行的工具。

• yarn 是 Facebook 开源的用于 JavaScript 包管理的工具，是 npm 的替代品。
• npm 是 JavaScript 包管理器，是 Node.js 自带的包管理工具。
• craco (create-react-app-config-overrides) 是一个在 Create React App 项目中配置和覆盖 webpack 配置的工具。

本文将分别介绍这三个工具的使用和作用。

yarn

安装

npm install -g yarn

使用

# 初始化一个新的项目（相当于 npm init）。
yarn init 

# 安装依赖，会将依赖保存到 package.json 中。
yarn add [package]
yarn add [package]@[version]
yarn add [package] --dev

# 卸载依赖
yarn remove [package]

# 更新依赖
yarn upgrade [package]
yarn upgrade [package]@[version]

npm

使用

# 初始化一个新的项目
npm init

# 安装依赖，会将依赖保存到 package.json 中。
npm install [package]
npm install [package]@[version]
npm install [package] --save-dev

# 卸载依赖
npm uninstall [package]

# 更新依赖
npm update [package]
npm update [package]@[version]

craco

安装

# 首先需要安装 create-react-app
npm install -g create-react-app

# 然后使用 create-react-app 创建一个新项目
create-react-app my-app 

cd my-app

craco 只能在 Create React App 创建的项目中使用。

# 安装 craco
npm install --save-dev @craco/craco

使用

// craco.config.js

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/')
    },
    plugins: [
      // 添加插件
      new MyPlugin()
    ]
  },

  // 配置开发服务环境
  devServer: {
      proxy: {
          '/api': {
              target: 'http://localhost:3000',
              changeOrigin: true,
              pathRewrite: { '^/api': '' },
          },
      },
  },
};

结论

yarn 和 npm 的功能类似，但是 yarn 更快更稳定。而 craco 则可以让我们更方便的在 Create React App 项目中定制 webpack 配置。以上三个工具都是我们在开发过程中必须要掌握和使用的工具。