前言
在现代化的前端开发中，项目构建和打包已经成为不可或缺的一部分，为了更好的开发体验和前端开发效率，诸如 webpack、gulp、rollup 等构建工具应运而生。但是，这些构建工具的使用复杂度较高，需要开发者手动配置相应的流程和配置文件，增加了开发成本。为了解决这个问题，出现了一些现成的构建脚手架工具，例如 Vue CLI 和 Create React App。但是，这些工具对应用的热更新、应用的构建和配置、应用的部署等方面的灵活性不够强，有时候需要通过定制化的方式解决问题。
今天，我要介绍的是另一款构建脚手架工具 - "@maegi/cli"，它允许开发者自定义和创建一个灵活和强大的构建管道，同时具有高可扩展性和定制化程度。下面，我将为大家详细介绍它的使用方法。
安装
首先，我们需要安装 "@maegi/cli"。打开命令行，输入以下命令：
npm install -g @maegi/cli
使用
安装成功后，我们就可以使用 "@maegi/cli" 构建我们的应用了。下面，我将介绍使用 "@maegi/cli" 创建一个基于 React 的应用。
首先，打开命令行，切换到项目所在目录，在命令行中输入以下命令：
maegi create my-app --template react
这个命令将会创建一个名为 "my-app" 的项目，并使用 "react" 模板初始化项目。
接下来，我们需要进入到 "my-app" 目录中，输入以下命令启动项目：
cd my-app maegi serve
这个命令将会启动一个开发服务器，并监听文件变化，随时重新构建。我们可以通过访问 "http://localhost:8080" 来查看我们的应用。
到这里，我们就创建了一个基于 React 的应用。当然，我们也可以使用 "@maegi/cli" 创建一个基于 Vue 的应用，只需要将模板类型替换成 "vue" 即可。
配置
"@maegi/cli" 的默认配置已经够用了，但是如果我们需要额外的功能或者需要自定义配置，就需要修改配置文件了。"@maegi/cli" 的配置文件为 ".maegirc.js"（或 ".maegirc"）。
例如，如果我们想在启动应用时，自动打开浏览器并跳转到应用页面，我们需要修改 ".maegirc.js" 文件。打开文件，加入以下代码：
module.exports = { devServer: { open: true, openPage: "", }, };
这个配置将会在启动应用时，自动打开浏览器并跳转到默认路径。
插件
"@maegi/cli" 支持插件，我们可以通过插件来扩展功能、定制开发流程。安装插件的方式也很简单，只需要使用 npm 安装即可。
例如，我们想在我们的应用中使用 Sass 来编写样式，我们可以安装 "@maegi/sass" 插件。打开命令行，切换到项目所在目录，输入以下命令：
npm install @maegi/sass --save-dev
安装成功后，我们需要在 ".maegirc.js" 文件中添加以下代码：
module.exports = { pluginOptions: { sass: { implementation: require("sass"), }, }, };
这个配置将会启用 "@maegi/sass" 插件，并告诉 "@maegi/cli" 使用 "node-sass" 作为 Sass 的实现库。
总结
"@maegi/cli" 是一个非常灵活和强大的构建脚手架工具，可以帮助我们构建灵活和强大的构建管道，并且具有高可扩展性和定制化程度。如果你想进一步了解该工具，可以参考 "@maegi/cli" 的官方文档。
示例代码
以下是一个简单的基于 React 的应用，使用 "@maegi/cli" 构建：
-- -------------------- ---- ------- -- -------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- -------------------- --- --------------------------------- -- ------ ------ ----- ---- -------- ------ ------------ -------- ----- - ------ - ---- ---------------- ---------- ----------- ------ -- - ------ ------- ---- -- ------- ---- - ----------------- ----- -------- ----- -展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/146863
