码迷,mamicode.com
首页 > 其他好文 > 详细

React构建项目

时间:2020-03-17 23:54:42      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:back   属性   ati   info   conf   pre   link   tps   引入   

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

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

React构建项目

标签:back   属性   ati   info   conf   pre   link   tps   引入   

原文地址:https://www.cnblogs.com/sisxxw/p/12514498.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!