React构建项目

Posted 2021-03-05 sisxxw

一、命令行依次输入如下的命令

npm install -g create-react-app

create-react-app my-app

cd my-app

npm start

创建完成后文件的结构如下：

　　

 

src中的文件就是我们项目需要编写的文件

　　如果我们需要在react项目中使用antd

则需要执行如下命令

　　npm install antd --save之后执行npm install babel-plugin-import --save（这是按需引入）

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

 

const { override, fixBabelImports } = require(‘customize-cra‘);

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports(‘import‘, {
+     libraryName: ‘antd‘,
+     libraryDirectory: ‘es‘,
+     style: ‘css‘,
+   }),
+ );

 

之后只需要在组件中引用就行了

  // src/App.js
  import React, { Component } from ‘react‘;
  import { Button } from ‘antd‘;
  import ‘./App.css‘;

  class App extends Component {
    render() {
      return (
        <div className="App">
          <Button type="primary">Button</Button>
        </div>
      );
    }
  }

 

为了加快开发的速度，我们可能需要使用less

 npm install less less-loader --save-dev 

 我们需要运行npm run eject   来暴露webpack的配置文件，你会发现多了config为名的文件夹

之后修改webpack.config.js文件

 // 在module中做了三处修改
  // 第一处是找到 `test: /.css$/` 将其改为  `test: /.(css|less)$/`
  // 第二处是增加 `less-loader`的配置
  // 第三处是在exclude属性中增加 `/.(css|less)$/` 
  // 具体修改如下
  module: {
    ...
    {
      // test: /.css$/  第一处 
      test: /.(css|less)$/,
      use: [
        require.resolve(‘style-loader‘),
        ...
        // 第二处
        {
          loader: require.resolve(‘less-loader‘)
        }
      ]
    },
    {
      exclude: [
        /.(js|jsx|mjs)$/, 
        /.html$/, 
        /.json$/,
        // 第三处
        /.(css|less)$/,
      ]
    }
  }

 

之后重启项目就可以用less了

 

babel-plugin-import