什么是 create-react-stack
create-react-stack 是一个用于快速创建基于 React 的 Web 开发框架的 npm 包，他遵循了最佳实践和规范，将 React、Webpack 和 Babel 进行了封装，使得开发者可以更加位于高层次进行业务开发。
使用 create-react-stack
安装 create-react-stack
npm install -g create-react-stack
创建项目
在命令行中输入以下命令创建一个新的 React 项目：
create-react-stack my-app
创建完成后，进入项目目录
cd my-app
项目结构
create-react-stack 创建的项目结构如下：
my-app/
README.md
node_modules/
package.json
src/
App.js
index.js
webpack.config.js其中：
node_modules/文件夹下包含所有依赖项。src/文件夹下包含编写 React 组件的代码。webpack.config.js文件是 Webpack 的配置文件。
调试项目
在终端输入以下命令启动项目：
npm start
终端会自动打开浏览器，并启动 Webpack Dev Server 来热更新开发环境。
打包项目
在终端输入以下命令将项目打包：
npm run build
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文件中。const webpackConfig = require('create-react-stack/webpack.config'); module.exports = webpackConfig;确保修改完 Webpack 配置后执行
npm start或npm run build。
定制 Babel 配置
若你需要定制 Babel 配置，可以在项目根目录创建一个名为 .babelrc 的文件，然后在其中添加 Babel 配置，例如：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}使用 CSS
create-react-stack 默认使用 CSS 模块化加载器（CSS Modules），因此你可以在 JavaScript 文件中导入 CSS 文件：
import styles from './myStyles.module.css';
在 CSS 中，使用 :global() 包裹样式名字以避免其被模块化：
:global(.my-global-rule) {
color: red;
}使用 Sass
create-react-stack 支持 Sass，需要按照以下步骤进行配置：
在终端中执行以下命令安装支持 Sass 的 Webpack 加载器：
npm install sass-loader node-sass --save-dev
将
.css文件的后缀改为.scss并使用 Sass 语法编写。在 JavaScript 文件中导入
.scss文件：import './myStyles.scss'
使用 TypeScript
若需要使用 TypeScript，请按照以下步骤进行配置：
在项目根目录下创建文件
tsconfig.json，输入以下代码：-- -------------------- ---- ------- - ------------------ - --------- ------ ------ ------- --------------- ---------- ---------- ----- --------------- ----- ------------------ ----- ------------------------------- ----- --------- ----- ----------------------------------- ----- --------- --------- ------------------- ------- -------------------- ----- ------------------ ----- --------- ---- -- ---------- ------- -在终端中执行以下命令安装 TypeScript 和 TSX 支持：
npm install typescript ts-loader react react-dom @types/react @types/react-dom --save
将后缀名为
.js的文件改为.tsx并使用 TypeScript 编写。在 JavaScript 文件中导入
.tsx文件：import App from './App';
小结
create-react-stack 是一个非常方便快速创建 React 应用的工具，不仅方便快捷，而且符合最佳实践和规范，可以帮助我们快速搭建一个开箱即用的开发环境，让我们只需要关注项目的业务逻辑。同时，对于想要深入了解 React、Webpack 和 Babel 的用户，它也提供了非常便利的定制方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672281e8991b448e3924