搭建 React 开发环境本文使用 Facebook 提供的 Create React App 脚手架创建 React

本文使用 Facebook 提供的 Create React App 脚手架创建 React 应用程序，还将介绍如何修改 React 应用程序的 Webpack 配置。

使用 Create React App 创建 React 应用

用 Create React App 创建 React 应用并运行新建的程序非常简单，通过下面这三步即可：

进入任何一个目录，在终端中执行npx create-react-app react-demo --template typescript命令。
cd react-demo
npm start

由于本文将 React 与 TypeScript 结合，所以第一步使用了 typescript 模板，后面的内容把使用 React React App 创建的应用程序简称为 react-demo。

修改 webpack 配置

react-demo的配置被封装在react-scripts中，执行npm run eject命令能将这些配置全部暴露出来，一旦暴露，所有的配置就必须自己维护，如果只是小改动，那么不建议运行eject命令。后文介绍在不运行 eject 的情况下如何修改配置项。分为如下3步：

安装 @craco/craco

npm install @craco/craco --save-dev

在 react-demo 的根目录创建一个 craco.config.js 文件

module.exports = {
    // 在这里修改配置项
}

替换 package.json 中的 scripts

"start": "craco start",
"build": "craco build",
"test": "craco test",

总体来看，使用@craco/craco修改配置项只需要上述三步，在@craco/craco仓库中能找到详细的说明。第二步是最关键的，下面用两个例子演示如何修改默认配置。

将 CSS Modules 应用到以 .sass 和 .scss 为扩展名的文件

要在 react-demo 使用 CSS 预编译器 Sass，需要先安装它：

npm install sass --save-dev

react-demo 的默认配置是将 CSS Modules应用到以 .module.scss 和 .module.sass 为扩展名的文件，现在修改配置项让它应用到以 .sass和.scss 为扩展名的文件。修改craco.config.js文件如下：

module.exports = {
    webpack: {
        configure: (webpackConfig) => {
            let oneOf = webpackConfig.module.rules[1].oneOf
            
            const sassRegex = /\.(scss|sass)$/;
            const sassModuleRegex = /\.module\.(scss|sass)$/;

            // 删除 /\.(scss|sass)$/
            oneOf = oneOf.filter(item => (!item.test || item.test.toString() !== sassRegex.toString()))
            // 找到 /\.module\.(scss|sass)$/
            const sassModuleRule = oneOf.find(item => item.test.toString() === sassModuleRegex.toString())
            // 将 /\.module\.(scss|sass)$/改成 /\.(scss|sass)$/，使所有的 .scss 和 .sass 都支持 CSS module
            if (sassModuleRule) {
                sassModuleRule.test = sassRegex
            }
            webpackConfig.module.rules[1].oneOf = oneOf
            
            return webpackConfig
        }
    }
}

使用 babel-plugin-react-css-modules

babel-plugin-react-css-modules 是一个 CSS Module 解决方案，能在编译阶段将 JSX 上的styleName 转换成 className，在写代码时可以用 styleName="CSS类名" 代替 className={style.CSS类名}，当 JSX 上有多个 CSS 类名时，babel-plugin-react-css-modules的便利性会格外明显。修改craco.config.js文件如下：

const CSS_MODULE_LOCAL_IDENT_NAME = "[path]___[name]__[local]";
module.exports = {
    style: {
        modules: {
            localIdentName: CSS_MODULE_LOCAL_IDENT_NAME
        }
    },
    babel: {
        plugins: [
            ["react-css-modules", {
                filetypes: {
                    '.scss': {
                        syntax: 'postcss-scss'
                    },
                },
                generateScopedName: CSS_MODULE_LOCAL_IDENT_NAME
            }]
        ]
    }
};

要想上述配置能正常工作必须安装 babel-plugin-react-css-modules 和 postcss-scss，同时还要保证 babel-plugin-react-css-modules 和 CSS Module 生成的 CSS 类名一致。babel-plugin-react-css-modules 用众多优点，在 github.com/gajus/babel… 能查看它的详细信息。

总结

Create React App是一个开箱即用的脚手架，它将所有的 webpack、babel 等配置都封装起来，对开发者不可见，使用它创建 demo 开始学习 React，其成本很小。如果开发成熟的项目，需要定制 webpack 配置，其成本较高。

搭建 React 开发环境

使用 Create React App 创建 React 应用

修改 webpack 配置

将 CSS Modules 应用到以 .sass 和 .scss 为扩展名的文件

使用 babel-plugin-react-css-modules

总结

推荐