如何安装并使用yarn代码打包工具

简介

在进行项目开发过程中，我们常常需要将代码进行打包，以便部署到生产环境中，yarn是一款流行的包管理工具，提供了很多功能来帮助我们管理和构建项目，可通过yarn build将代码进行打包，并生成可部署的文件。

以下是具体操作方式

一、流程概述

（1）安装并初始化yarn

（2）配置项目的打包选项

（3）运行yarn build命令进行打包

（4）查看生成的打包文件

二、操作步骤

1、安装node，从node.js官网下载安装包，根据目标系统架构选择X86或者ARM架构的安装包，或者Linux下通过命令下载

wget https://nodejs.org/dist/v14.19.0/node-v14.19.0-linux-arm64.tar.gz

2、解压node安装包

tar -zxvf node-v14.19.0-linux-arm64.tar.gz -C /usr/local/
cd /usr/local
mv node-v14.19.0-linux-arm64/ node

3、添加环境变量vim /etc/profile 

export NODE_HOME=/usr/local/node
export PATH=$NODE_HOME/bin:$PATH

4、source /etc/profile

source /etc/profile

5、查看版本

root@localhost:~# node  -v
v14.19.0
root@localhost:~# npm -v
6.14.16
root@localhost:~# npx -v
6.14.16

6、which node  、 whereis node   查看有无 node、npm等命令

root@localhost:~# which node
/usr/local/node/bin/node
root@localhost:~# whereis node
node: /usr/local/node /usr/local/node/bin/node
root@localhost:~# which npm
/usr/local/node/bin/npm
root@localhost:~# whereis npm
npm: /usr/local/node/bin/npm
root@localhost:~#

7、通过npm安装yarn

npm install -g yarn

8、使用yarn命令将项目初始化

yarn init

9、安装依赖

yarn add webpack webpack-cli

10、创建入口文件（例子）

echo "console.log('Hello,world');" > ./index.js

11、创建webpack配置文件，vim webpack.config.js

const path = require('path');
module.exports = {
        mode: 'development',
        entry: './index.js',
        output: {
                path: path.resolve(__dirname, 'build'),
                filename: 'bundle.js'
        }
};

12、修改package.json文件

{
  "name": "dist",
  "version": "dist",
  "description": "dist",
  "main": "dist",
  "repository": "dist",
  "author": "dist",
  "license": "MIT",
  "private": null,
   "dependencies": {
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4"
  },
    "scripts": {
          "build": "webpack --config webpack.config.js"
  }
}

13、运行yarn build命令进行打包

root@localhost:~/my-project# yarn build
yarn run v1.22.21
warning ../package.json: License should be a valid SPDX license expression
$ webpack --config webpack.config.js
asset bundle.js 1.18 KiB [emitted] (name: main)
./index.js 28 bytes [built] [code generated]
webpack 5.90.3 compiled successfully in 339 ms
Done in 2.58s.