简介
Candycane-cli 是一个基于 Node.js 的命令行工具，它能够帮助我们快速搭建一个 React 项目的开发环境。Candycane-cli 集合了一些优秀的 JavaScript 技术栈，包括 Webpack、Babel、ESLint、Jest 等，可以让我们更加专注于业务开发。
在本文中，我们将详细介绍 Candycane-cli 的使用方法，并以一个简单的 React 项目为例进行演示。
安装 Candycane-cli
安装 Candycane-cli 非常简单，只需要在命令行中输入以下命令即可：
- --- ------- -- -------------
创建项目
安装完成后，我们可以随时使用 Candycane-cli 创建一个新的 React 项目。在命令行中执行以下命令：
- --------- ------ ------
这里的 my-app 是你想要创建的项目名称。执行完这条命令后，Candycane-cli 会下载模板并生成项目。
运行项目
Candycane-cli 提供了两种方式来运行项目：
开发模式
在开发模式下，我们可以即时看到我们做的更改。在项目目录中打开一个新的命令行窗口，输入以下命令：
- -- ------ - --- -----
然后在浏览器中打开 localhost: 3000，就可以看到我们的项目了。
生产模式
在生产模式下，我们可以将项目打包并部署到服务器上。在项目目录中打开一个新的命令行窗口，输入以下命令：
- -- ------ - --- --- -----
然后，我们可以将生成的 build 目录上传到服务器上即可。
项目结构
安装 Candycane-cli 创建的项目结构如下：
------- --- ------------- --- ------- - --- ----------- - --- ---------- - --- ------------- --- ---- - --- ------ - --- ----------- - --- -------- - --- -------- - --- ------------------------ --- ---------- --- ----------------- --- ------------
其中，public 目录存放静态资源文件，如 index.html 等，而 React 的代码则存放在 src 目录中。
深入应用 Candycane-cli
上面我们已经介绍了 Candycane-cli 的基本用法，但是在实际工作中，我们可能会有更多的需求。下面是一些常见的用法，我们可以通过这些用法更加灵活的使用 Candycane-cli：
使用 Sass
Candycane-cli 默认情况下是不支持 Sass 的，如果我们需要使用 Sass，我们需要额外安装 node-sass 和 sass-loader 两个依赖项。在项目目录下执行以下命令进行安装：
- --- ------- --------- ----------- ----------
然后，我们需要修改 webpack.config.dev.js 和 webpack.config.prod.js 两个文件：
-- ---------------------
-------------- - -
-- ------ --------
------- -
------ -
-- ------ --------
-
----- -----------------
---- -
- ------- -------------- --
- ------- ------------ --
- ------- ------------- -
-
-
--
-
--- ----------------------
-------------- - -
-- ------ --------
------- -
------ -
-- ------ --------
-
----- -----------------
---- -
- ------- -------------- --
- ------- ------------ --
- ------- ------------- -
-
-
--
-
-修改完之后，我们就可以在项目中使用 Sass 了。在 src/App.scss 中编写样式文件：
-- ------------ --
--------------- --------
---- -
----------- -------
----------- ------
----- -
------- -----
-
-- -
------ ---------------
-
-然后在 src/App.js 中引入样式文件：
-- ----------
------ ------ - --------- - ---- --------
------ ---- ---- -------------
------ -------------
----- --- ------- --------- -
-------- -
------ -
---- ----------------
------- -----------------------
---- ---------- ---------------- ---------- --
--- ----------------------------- -- ----------
---------
-- ----------------------
-- --- -------- ---- ----------------------- --- ---- -- -------
----
------
--
-
-
------ ------- ----最后，重新启动项目：
- --- -----
这时我们就可以看到我们自己编写的样式生效了。
配置代理
有时候我们需要在本地开发环境中访问不同的 API 主机。我们可以借助 Candycane-cli 的 proxy 配置项来实现。
在项目目录下，新建一个 src/setupProxy.js 文件。然后，我们可以在该文件中指定代理规则。例如，我们可以将请求 localhost:3000/api/xxx 转发到 localhost:8080/api/xxx：
-- ----------------- ----- ----- - --------------------------------- -------------- - ------------- - --------------------- - ------- ------------------------ ---- --
上面的代码中，我们使用了 http-proxy-middleware 依赖，它能够帮助我们方便的配置代理。
注意：在执行这个命令前需要安装 http-proxy-middleware：
- --- ------- --------------------- ----------
配置环境变量
Candycane-cli 默认会在项目中定义两个环境变量：NODE_ENV 和 PUBLIC_URL。
其中，NODE_ENV 表示当前环境是开发环境还是生产环境，值为 development 或 production；PUBLIC_URL 表示项目在浏览器中的访问根路径。
我们也可以在项目中定义自己的环境变量，以便在代码中进行使用。有两种方法可以实现：
修改 .env 文件
在项目根目录下新建一个 .env 文件，然后定义环境变量。例如：
----------------------------------------
这个环境变量的名字必须以 REACT_APP_ 开头，因为 Candycane-cli 会自动检测。
接下来，在代码中使用这个变量：
----- ------ - -----------------------------
注意：在启动时需要添加 cross-env：
- --------- -------------------- --------- ------------- -----
直接定义环境变量
我们也可以在命令行中直接定义环境变量。例如，下面这个命令会在项目中定义一个 API_URL 环境变量：
- ------------------------------ --- -----
接下来，在代码中使用这个变量：
----- ------ - -------------------
总结
在本文中，我们详细介绍了 Candycane-cli 的安装、使用方法，并以实际的示例展示了它的使用场景。当然，在日常的开发中，我们还会遇到很多问题，例如如何在 Candycane-cli 中使用 TypeScript、如何自定义 Webpack 配置等，这些问题都有相应的解决方案。
总的来说，Candycane-cli 是一个非常优秀的前端构建工具，我们应该在日常工作中多加使用，了解它的各种功能和使用方法，并不断扩展自己的知识面，提高自己的技能水平。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c92ccdc64669dde59fe