介绍
interactive-scripts 是一个 npm 包，它提供了一个交互式命令行界面 (CLI) 工具，可以帮助前端开发人员更方便地创建和管理项目。该工具基于 Node.js 平台和 Inquirer.js 库实现。
通过这个工具，你可以：
- 快速创建一个基于 React 的前端项目或者一个纯静态 HTML/CSS/JS 项目；
- 管理项目中的依赖关系，自动导入和安装需要的 NPM 包；
- 通过命令行验证和编译你的代码，生成可部署的静态文件。
本文将介绍如何使用 interactive-scripts 工具完成上述任务。
安装
首先，需要将 interactive-scripts 安装到全局环境中，可以使用以下命令：
npm install -g interactive-scripts
这个命令将下载并安装最新版的 interactive-scripts。
创建项目
创建项目非常简单，只需要执行以下命令：
interactive-scripts create
这个命令将会提示你输入一些参数来配置项目，如项目名称、描述、作者等等。默认情况下，这个工具会创建一个基于 React 的项目，但是你也可以选择创建一个纯静态的项目。
在项目目录下，我们可以找到以下文件和文件夹：
-- -------------------- ---- ------- --------- ------ -------- ------------- --------- ---------- ------------- ----------------- ------------ --------- ---------
其中：
public/目录包含了项目的入口 HTML 文件，以及一些静态资源；src/目录包含了项目的核心代码，包括 React 组件、CSS 样式和 JavaScript 代码；.babelrc文件包含了 Babel 编译器的配置信息；.editorconfig文件包含了项目中的编辑器配置，比如 tab/spaces 等等；.eslintrc文件包含了 ESLint 的配置信息；.gitignore文件包含了 Git 版本控制忽略的文件；.node-version文件指定了 Node.js 最低运行版本；package-lock.json和yarn.lock文件分别记录了项目依赖包的版本信息；package.json文件包含了项目的元数据和依赖信息；README.md文件包含了项目的说明文档。
管理依赖
在项目目录下，你可以使用以下命令来安装、卸载或者更新项目的依赖包：
interactive-scripts add <package> interactive-scripts remove <package> interactive-scripts upgrade
其中：
add命令用于安装一个新的 NPM 包；remove命令用于卸载一个已安装的 NPM 包；upgrade命令用于更新所有已安装的 NPM 包。
使用这些命令时，工具会自动检测项目中的依赖关系，并更新 package.json 和 package-lock.json 文件。另外，工具还会自动执行 npm install 命令来安装或更新依赖包。
验证和编译
在项目目录下，你可以使用以下命令来验证和编译你的项目代码：
interactive-scripts lint interactive-scripts build
其中：
lint命令用于检查项目中的 JavaScript 代码和 CSS 样式，查找潜在的问题和错误；build命令用于编译项目代码，并生成可部署的静态文件。
使用这些命令时，工具会自动调用 ESLint 和 Babel 编译器来执行相关操作。编译后的文件将生成在 build/ 目录下。
示例代码
假设我们要创建一个名为 my-app 的 React 项目，我们可以使用以下命令：
interactive-scripts create
在交互式界面中，我们依次输入以下内容：
project name: my-app project description: My amazing app author: John Doe select type: react save dependencies: Y
这样，工具会自动创建一个基于 React 的项目，并安装所有必要的依赖包。
接下来，我们在 src/ 目录下创建一个名为 App.js 的文件，编写以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------
-------- ----- -
------ -
---- ----------------
----------- -- -- ---------
-------- -----------
------
--
-
------ ------- ----在 src/ 目录下创建一个名为 App.css 的文件，编写以下代码：
.App {
text-align: center;
}最后，执行以下命令：
interactive-scripts build
这样，工具将自动编译项目代码，并生成可部署的静态文件。在 build/ 目录下，我们可以找到以下文件：
./index.html ./static/css/main.e91e854f.chunk.css ./static/js/main.19d99c2d.chunk.js ./static/js/runtime-main.37dfba08.js
打开 index.html 文件，可以看到一个简单的欢迎页面。
至此，我们成功地创建了一个基于 React 的前端项目，并使用 interactive-scripts 工具完成了依赖管理、代码验证和编译等任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560d181e8991b448df13d