什么是 create-react-stack
create-react-stack 是一个用于快速创建基于 React 的 Web 开发框架的 npm 包，他遵循了最佳实践和规范，将 React、Webpack 和 Babel 进行了封装，使得开发者可以更加位于高层次进行业务开发。
使用 create-react-stack
安装 create-react-stack
--- ------- -- ------------------
创建项目
在命令行中输入以下命令创建一个新的 React 项目：
------------------ ------
创建完成后，进入项目目录
-- ------
项目结构
create-react-stack 创建的项目结构如下：
-------
---------
-------------
------------
----
------
--------
-----------------其中：
node_modules/文件夹下包含所有依赖项。src/文件夹下包含编写 React 组件的代码。webpack.config.js文件是 Webpack 的配置文件。
调试项目
在终端输入以下命令启动项目：
--- -----
终端会自动打开浏览器，并启动 Webpack Dev Server 来热更新开发环境。
打包项目
在终端输入以下命令将项目打包：
--- --- -----
WebPack 会在 build/ 文件夹下生成一个用于生产环境的项目（包括 HTML、CSS 和 JavaScript 文件）。
深入了解 create-react-stack
Webpack 配置
create-react-stack 项目的 Webpack 配置文件是在 npm 模块 create-react-stack/webpack.config.js 中定义的。如果你需要自定义 Webpack 配置，请按照以下步骤操作：
在项目根目录创建
webpack.config.js文件。将以下代码复制到
webpack.config.js文件中。----- ------------- - --------------------------------------------- -------------- - --------------
确保修改完 Webpack 配置后执行
npm start或npm run build。
定制 Babel 配置
若你需要定制 Babel 配置，可以在项目根目录创建一个名为 .babelrc 的文件，然后在其中添加 Babel 配置，例如：
-
---------- -
--------------------
---------------------
--
---------- -------------------------------------------
-使用 CSS
create-react-stack 默认使用 CSS 模块化加载器（CSS Modules），因此你可以在 JavaScript 文件中导入 CSS 文件：
------ ------ ---- ------------------------
在 CSS 中，使用 :global() 包裹样式名字以避免其被模块化：
------------------------ - ------ ---- -
使用 Sass
create-react-stack 支持 Sass，需要按照以下步骤进行配置：
在终端中执行以下命令安装支持 Sass 的 Webpack 加载器：
--- ------- ----------- --------- ----------
将
.css文件的后缀改为.scss并使用 Sass 语法编写。在 JavaScript 文件中导入
.scss文件：------ -----------------
使用 TypeScript
若需要使用 TypeScript，请按照以下步骤进行配置：
在项目根目录下创建文件
tsconfig.json，输入以下代码：- ------------------ - --------- ------ ------ ------- --------------- ---------- ---------- ----- --------------- ----- ------------------ ----- ------------------------------- ----- --------- ----- ----------------------------------- ----- --------- --------- ------------------- ------- -------------------- ----- ------------------ ----- --------- ---- -- ---------- ------- -在终端中执行以下命令安装 TypeScript 和 TSX 支持：
--- ------- ---------- --------- ----- --------- ------------ ---------------- ------
将后缀名为
.js的文件改为.tsx并使用 TypeScript 编写。在 JavaScript 文件中导入
.tsx文件：------ --- ---- --------
小结
create-react-stack 是一个非常方便快速创建 React 应用的工具，不仅方便快捷，而且符合最佳实践和规范，可以帮助我们快速搭建一个开箱即用的开发环境，让我们只需要关注项目的业务逻辑。同时，对于想要深入了解 React、Webpack 和 Babel 的用户，它也提供了非常便利的定制方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005672281e8991b448e3924