在 Next.js 中使用 Yarn 是非常常见的，因为 Yarn 不仅更快，而且可以更好地管理依赖。在这篇文章中，我们将会学习怎么在 Next.js 中使用 Yarn。
什么是 Yarn？
Yarn 是一个 Facebook 开源的 JavaScript 包管理工具，它可以代替原来的 npm，更快速地安装包并支持离线下载。除了速度较快外，它还有单独的 lock 文件，可用于确保同一项目从不同设备依赖不会出现问题。这意味着 Yarn 会跟踪并维护与当前项目兼容的版本，使得包管理过程变得更可靠。
如何在 Next.js 中使用 Yarn？
使用 Yarn 可以替代原先的 npm，但是使用 Yarn 之前需要安装 Yarn。安装工具使用起来非常简单，只需在终端中输入以下命令：
--- ------- -------- ----
现在我们已经准备好了 Yarn。默认情况下，Next.js 使用 npm，但你可以将其切换为 Yarn。无论你使用哪种包管理工具，都需要使用 package.json 文件。
首先，进入你的 Next.js 项目目录，并输入以下命令来初始化 Yarn：
---- ----
这将会创建一个新的 package.json 文件，并提示你输入一些基本的项目数据。然后，你可以使用以下命令安装你需要的依赖：
---- --- ------------
或者你可以使用以下命令将依赖项安装到开发依赖项中：
---- --- ----- ------------
在这里，<dependency>是任何你需要安装的依赖项。例如，我们安装 React 和 Next.js：
---- --- ----- ----
以上命令将会自动在 package.json 文件中添加依赖项，并将它们添加到 yarn.lock 文件中。
Yarn 和 Next.js 示例代码
现在我们来看下如何在 Next.js 中创建新的 Yarn 项目。首先，使用以下命令创建一个名为 next-yarn 的新 Next.js 项目：
---- ------ -------- ---------
这将安装依赖项并创建新的 Next.js 项目。完成后，进入新创建的目录并使用以下命令启动开发服务器：
-- --------- ---- ---
以上命令将开发服务器运行在 http://localhost:3000。接下来，我们可以编辑 pages 目录下的文件，例如 index.js。在这里，我们来修改 index.js 文件：
------ ---- ---- -----------
------ ------- -------- ------ -
------ -
---- ----------------------
------
-------------- --- ------------
----- ---------- ------------------- --
-------
------
--- ------------------
------- -- -- ------------------------------------- --- -- -------------------------------------
-----
-------
--------
---
------- -- -- ------------------------------------- --- -- -------------------------------------
----
---------
------ ------
---------- -
----------- ------
-------- - -------
-------- -----
--------------- -------
---------------- -------
------------ -------
-
---- -
-------- ---- --
----- --
-------- -----
--------------- -------
---------------- -------
------------ -------
-
------ -
------ -----
------- ------
----------- --- ----- --------
-------- -----
---------------- -------
------------ -------
-
------ --- -
------------ -------
-
------ - -
-------- -----
---------------- -------
------------ -------
-
- -
------ --------
---------------- -----
-
------ -
------- --
------------ -----
---------- -----
-
-------
------------ -
----------- -------
-
------------ -
------------ ----
---------- -------
-
---- -
----------- --------
-------------- ----
-------- --------
---------- -------
------------ ------ ------- ------ -------- ---------- ----- ------ ---- ----- --------- ---- ---- ----- ------- ---- ----------
-
----- -
-------- -----
------------ -------
---------------- -------
---------- -----
---------- ------
----------- -----
-
----- -
------- -----
----------- ----
-------- -------
----------- -----
------ --------
---------------- -----
------- --- ----- --------
-------------- -----
----------- ----- ----- ----- ------------ ----- -----
-
------------
------------
------------ -
------ --------
------------- --------
-
----- -- -
------- - - ---- --
---------- -------
-
----- - -
------- --
---------- --------
------------ ----
-
----- -
------- ----
------------ -------
-
------ ----------- ------ -
----- -
------ -----
--------------- -------
-
-
----------
------
-
-现在我们已经完成了对 index.js 文件的修改，其中包含了 Yarn 标志。
接下来，我们可以再进入终端，在项目目录下输入以下命令来构建生产环境的应用程序，构建完成后应用程序将自动启动：
---- ----- ---- -----
结论
在 Next.js 中使用 Yarn 是非常简单的，它不仅更快，而且更稳定。在本文中，我们学习了 Yarn 的基础知识、如何在 Next.js 中使用 Yarn，以及如何在示例代码中使用。
我们希望这篇文章能对你有所帮助，如果你对 Next.js 或 Yarn 有任何周围的问题或建议，请不要犹豫联系我们，我们随时为你服务！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67121cc7ad1e889fe202c2d3