react学习笔记-react官方脚手架搭建项目与支持less

脚手架搭建项目

默认已经安装并配置了nodejs及其全局环境。
打开任意一种可以使用控制台指令的工具，可以是git的bash，可以是vscode的终端，也可以是系统自带的cmd控制台；

1. create-react-app安装

npm install -g create-react-app

2. create-react-app搭建项目

create-react-app my-app // 项目名 
// 项目名不要包含中文(因为脚手架创建项目的时候会使用npm init,而默认-y参数会以文件夹名作为packge.json里的一个参数值，在生成这个值的时候中文会引发报错)。

3. 运行项目

cd my-app
npm start

运行成功，则表示项目搭建成功，可以通过控制台提供的地址访问该项目。
最终项目架构：

├─ node_modules 
├─ public
├─ scripts
├─ src           
├─ .gitignore
├─ package.json
├─ README.md
└─ yarn.lock  // 使用yarn搭建项目会有的文件

支持less

create-react-app 是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式，不过目前版本(1.5.x)构建的项目默认是不支持动态样式语言 Less 的。
要使 create-react-app 构建的项目能正常解析 less 文件，需要让 webpack 能够把 less 文件编译成 css 文件。

安装 less & less-loader

把 less 和 less-loader (less 编译器)添加到项目中：

yarn add less less-loader
// npm install less less-loader

通过 webpack 使用 less-loader

官方webpack 文档 中提供了多种配置方式，基于react脚手架，我们应该选择在webpack.config.js文件中配置 less-loader。

暴露 webpack 配置文件

官方脚手架为了实现“零配置”，会默认把一些通用的脚本和配置集成到 react-scripts，被其集成的脚本和配置会从程序目录中消失（ webpack 相关配置文件） 。
但是项目构建完成后会提供一个命令yarn eject(npm run eject)，通过这个命令，我们可以把被 react-scripts 集成的配置和脚本暴露出来，将所有工具和包移动并将其配置为项目的依赖，这些文件都插到package.json文件的dependences下，开发时使用的自定义第三方库能被准确标记，也可以让我们自定义环境配置。
该命令只能执行一次并且 不可逆，执行后，项目中会多一个config文件。
其中有关于 webpack 的配置文件，我们只关注webpack.config.js文件。
在新建一个项目后，执行这个命令的时候，有可能会遇上以下报错：

这时候只需要依次执行以下命令即可：

git init
git add .
git commit -m 'Saving before ejecting'
npm run eject

修改 webpack 配置

在webpack.config.js文件中找到关于 css 文件的加载规则：

1. /\.css$/ 修改为 /\.(css|less)$/；

// style files regexes
const cssRegex = /\.(css|less)$/; //look here
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

2. 在use数组调用的方法中新增一个对象元素{loader: require.resolve('less-loader')}。

// common function to get style loaders use数组调用的方法，看一下就应该能看懂
  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: Object.assign(
          {},
          shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
        ),
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
        {
          loader: require.resolve('less-loader') 
        }, // look here
        ......
   }

修改完成后，我们就可以在项目中正常使用less了。

感谢：
Esofar-如何解决 React 官方脚手架不支持 Less 的问题