什么是 nitro
Nitro 是一个基于 Webpack、Babel 和 ESLint 的前端开发脚手架，它可以帮助我们快速搭建前端开发环境。Nitro 提供了一些默认的配置和插件，例如自动引入 CSS、提取公共代码、自动注入环境变量等等，同时 Nitro 也提供了可扩展的自定义配置方式。
安装 Nitro
使用 npm 可以非常方便地安装 Nitro：
npm install -g nitro-cli
安装成功后，我们可以使用 nitro init 创建一个新项目：
nitro init my-project
这将在当前目录下创建一个名为 my-project 的新项目，并且初始化一些必要配置。
在项目目录下，我们可以使用 npm start 命令启动开发服务器，使用 npm run build 命令打包代码。
在默认情况下，Nitro 默认会监听 3000 端口，启动一个开发服务器。我们可以在 http://localhost:3000 访问到应用程序。
Nitro 的配置文件
Nitro 使用 Webpack 进行打包，并且在项目根目录下提供了一个 nitro.config.js 文件，用于配置 Webpack。
以下是一个默认的 nitro.config.js 配置文件：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
--------- ----------
----- -------------------
--
-------- -
--- -------------------
-
--在这个配置文件中，我们定义了入口文件和输出文件的路径，以及一个自动插入 HTML 文件的插件（即 HtmlWebpackPlugin）。
Nitro 的配置文件十分灵活，可以根据不同的需求进行扩展。我们可以在其中使用常见的 Webpack 配置选项，例如 module、resolve、devServer 等。
Nitro 的插件系统
Nitro 可以通过添加插件来扩展和优化我们的开发体验。目前 Nitro 社区已经发布了许多第三方插件，例如 babel-plugin-import、eslint-config-prettier 等等。
我们可以通过在 nitro.config.js 中的 plugins 选项中添加我们需要的插件：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- -------------------- - --------------------------------------------------------
-------------- - -
------ -----------------
------- -
--------- ----------
----- -------------------
--
-------- -
--- --------------------
--- ----------------------
-
--在这个例子中，我们添加了一个用于分析打包大小的插件 webpack-bundle-analyzer。当使用 npm run build 打包代码时，该插件会在浏览器中打开一个可视化分析器，用于帮助我们优化代码大小。
Nitro 的自定义配置
如果你需要进行更进一步的自定义配置，可以在项目根目录下创建一个 nitro.extend.js 文件，用于扩展和修改 Nitro 的默认配置。
以下是一个示例 nitro.extend.js 文件：
-- -------------------- ---- -------
-------------- - -------- -------- -- -
-- ----- ------
--------------------------
----- ---------
---- --------------
---
-- ----- --------- ---
--------------------- - -----
-- -------
------------------------------ - -------------------------
------ -------
--在每次启动开发服务器或者打包代码时，Nitro 都会自动加载 nitro.extend.js 文件，并运行其中的对 Nitro 配置进行修改的函数。
结语
Nitro 是一个非常好用的前端开发脚手架。它提供了许多默认的配置和插件，同时也支持灵活的自定义配置。使用 Nitro 可以帮助我们快速搭建前端开发环境，并且优化开发体验。如果你正在寻找一款前端开发脚手架，不妨试试 Nitro。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eeda72ecebd9a1b02fbaac8