简介
abscli 是一个可以帮助前端开发者快速搭建维护 webpack 脚手架的命令行工具。它使用了webpack、webpack-cli、webpack-dev-server 等知名的前端构建工具，帮助我们解决了 webpack 配置繁琐、版本管理困难、环境安装繁琐等问题。
在本篇文章中，我们将会详细介绍如何安装和使用 abscli，并使用示例代码演示其具体应用。
安装
安装 abscli 只需要极少的命令即可完成。请打开命令行控制台，并输入以下命令：
npm install -g abscli
执行以上命令后，abscli 就会被安装到你的计算机中。
使用
使用 abscli 只需要简单的两步操作：初始化项目和启动服务。
初始化项目
初始化项目地意思是在需要创建项目的文件夹下通过 abscli 初始化一个 webpack 项目。打开命令行控制台，进入你的项目目录并输入如下命令：
abscli init
执行后，会出现以下问题，需要一步步回答：
- 当前项目的名称：projectName（默认 project）
- 你的项目要使用 TypeScript 吗？（y/n）：n（根据个人需求而定）
- 你的项目要使用 ESLint 吗？（y/n）：y（可以选择需要）
- 你的项目要使用 Sass 样式吗？（y/n）：y（可以选择需要）
回答完所有问题后，abscli 会在项目目录中创建出一个初步配置好的 webpack 项目。
运行服务
在我们创建好 webpack 项目后，我们需要启动项目并在浏览器中预览效果。再次打开命令行控制台，进入刚刚创建好的项目文件夹并输入如下命令：
abscli start
执行以上命令后，控制台会给出访问地址。我们在浏览器打开该页面即可查看我们项目的基础页面。
其他命令
除了 init 和 start 命令外，abscli 还提供了其他一些命令供我们使用，例如：
abscli build：构建线上环境下的代码abscli lint：使用 ESLint 进行代码检查abscli format：使用 prettier 对代码进行格式化
以上命令可以帮助我们更加方便地进行代码管理以及环境构建。
示例代码
webpack 配置
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
----------- ----
--
------- -
------ -
-
----- ----------
---- ---------------- --------------
--
-
----- --------------
---- ---------------- ------------- ---------------
--
-
----- -----------------------------
----- -----------------
--
-
----- ----------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ----------------------
--
--
--
--
--
---------- -
------------ ---------
---- -----
--------- -----
----- -----
----- -----
--
--示例代码
-- -------------------- ---- ------- ------ ---------------------- ------ ---- ---- -------------------- -- ---------- ----- --- - --- -------- ------- - ----- ------------------------------- -- -- ------ ---------- --------- -- - ---------------------------- -------------------------------- -----
总结
在本篇文章中，我们详细介绍了如何使用 abscli 快速搭建项目，以及如何启动服务预览效果，其通过内置 webpack 和 webpack-dev-server 等知名前端构建工具，为前端开发者们提供了维护、升级和构建前端项目的有效方式。希望能够帮助到更多的前端开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067380890c4f72775841a7