npm 包 hop-cli 是一个前端构建工具，它提供了一套简单易用的命令行工具，可以帮助我们快速搭建前端项目的基础架构，例如 webpack 配置，babel 配置，eslint 配置等，极大地提高了开发效率。本文将详细介绍 hop-cli 的使用方法，并且附带示例代码，希望可以对前端工程师有所帮助。
安装
首先，我们需要使用 npm 安装 hop-cli，运行以下命令：
npm install -g hop-cli
创建项目
使用 hop-cli 可以快速创建一个前端项目，我们只需要在命令行中运行以下命令：
hop create my-project
其中 my-project 可以替换成你自己想要的项目名称。
接下来，hop-cli 会询问一些配置信息，例如项目模板，预处理器等，我们可以根据自己的需要进行选择。
完成之后，hop-cli 会自动下载所需的依赖，并在当前目录下创建一个以 my-project 命名的项目。
项目配置
在项目目录下，可以看到一个名为 hop.config.js 的文件，它是整个项目的配置文件，我们可以在这个文件中对项目进行配置。
module.exports = {
entry: 'src/index.js',
output: {
path: 'dist',
filename: 'bundle.js'
}
};在这个例子中，我们配置了项目的入口文件为 src/index.js，打包后的文件放在 dist 目录下，并且命名为 bundle.js。
除此之外，还可以配置 babel，eslint 等相关设置，这些设置可以帮助我们更好地规范我们的代码风格。
命令行工具
除了自动生成项目之外，hop-cli 还提供了一些实用的命令行工具，例如构建，运行等。下面是一些常用的命令：
构建
使用以下命令进行项目构建：
hop build
如果你想在构建完成之后立即预览项目，可以使用以下命令：
hop build --watch --open
这个命令会开启一个本地服务器，并在默认浏览器中打开项目网页。
运行
使用以下命令进行项目运行：
hop serve
这个命令会开启一个本地服务器，并在默认浏览器中打开项目网页。
打包
使用以下命令进行项目打包：
hop pack
这个命令会将项目打包成一个 zip 文件，方便进行部署、分享等操作。
总结
通过本文，我们已经学会了如何使用 hop-cli 来快速搭建前端项目的基础架构，以及如何使用命令行工具进行项目构建、运行、打包等操作。希望这篇文章对前端工程师们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b43c6eb7e50355dbdc5