如何安装并使用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


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


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.










发布时间:2024-3-4 7:44 Monday
  • 版权声明:除非注明,文章均为【舞乂IT-专注于网络技术分享】原创,欢迎转载!转载请注明本文地址,谢谢!

  • 作者:舞乂IT-专注于网络技术分享

    舞乂人生,打造不一样的世界!共同学习,共同努力,提升技能!!!!!

    返回列表
    上一篇:
    下一篇: