Create-react-app+Antd+Less配置

solocoder 发布于2019-08-22 17:10 / 1901人阅读

摘要：说明官方脚手架工具用于快速创建应用，但依旧有局限性，我们根据项目需求需要对的配置进行修改。这里针对引入的两种配置方式进行配置。方案一一个对进行自定义配置的社区解决方案。安装修改启动项在项目根目录创建一个用于修改默认配置。

说明

React官方脚手架工具Create-react-app 用于快速创建React应用，但依旧有局限性，我们根据项目需求需要对Create-react-app的配置进行修改。这里针对引入Antd的两种配置方式进行配置。

方案

一. React-app-rewired（一个对 create-react-app 进行自定义配置的社区解决方案）。
1.安装react-app-rewired

npm install --save-dev react-app-rewired

2.修改package.json启动项

/* package.json */
"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test --env=jsdom",
}

3.在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

4.使用babel-plugin-import实现Antd按需加载，修改config-overrides.js

npm install --save-dev babel-plugin-import

/* config-overrides.js */
const { injectBabelPlugin } = require("react-app-rewired");
module.exports = function override(config, env) {
    config = injectBabelPlugin(["import", { libraryName: "antd", style: "css"}], config);
    return config;
};

5.使用react-app-rewire-less配置Less

npm install --save-dev react-app-rewire-less

/* config-overrides.js */
const { injectBabelPlugin } = require("react-app-rewired");
const rewireLess = require("react-app-rewire-less");

module.exports = function override(config, env) {
   config = injectBabelPlugin(["import", { libraryName: "antd", style: true }], config);
   config = rewireLess.withLoaderOptions({
     modifyVars: { "@primary-color": "#1DA57A" },
   })(config, env);
    return config;
};

我遇到的问题：
1._DEV_ is not defined.

npm install --save-dev react-app-rewire-defind-plugin

/* config-overrides.js */
const { injectBabelPlugin } = require("react-app-rewired");
const rewireLess = require("react-app-rewire-less");
const rewireDefinePlugin = require("react-app-rewire-define-plugin");

module.exports = function override(config, env) {
    config = injectBabelPlugin(["import", { libraryName: "antd", style: true }], config);
    config = rewireLess.withLoaderOptions({
        modifyVars: { "@primary-color": "#1DA57A" },
    })(config, env);
    config = rewireDefinePlugin(config, env, {
        __DEV__: false
    });
    return config;
};

2.Cannot read property "exclude" of undefined
参考 https://github.com/timarney/react-app-rewired/issues/145
解决方案 https://github.com/dawnmist/react-app-rewired/commit/25208ab81791edb4356dc959188bcd4c4471ad87

二. npm run eject 暴露所有内建的配置
1.使用babel-plugin-import实现Antd按需加载，修改package.json，或者在项目根目录新建文件.babelrc写配置，注意是二选一。

npm install --save-dev babel-plugin-import

1）package.json

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": true
        }
      ]
    ]
  },

2）.babelrc

{
   "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": true
        }
      ]
    ]
}

注意：不要认为package.json里已有presets配置这里就不用写，这里的.babelrc会覆盖package.json里带有的babel配置，如果删除presets配置，会报错。

2.引入Less

1）安装less-loader 和 less

npm install --save-dev less-loader less

2）修改config文件夹下的webpack.config.dev.js和webpack.config.prod.js文件(都需要修改)
查找：exclude
原本的 exclude: [/.js$/, /.html$/, /.json$/],
修改为 exclude: [/.html$/, /.(js|jsx)$/, /.(css|less)$/, /.json$/, /.bmp$/, /.gif$/, /.jpe?g$/, /.png$/],

查找：test
原本的 test: /.css$/,
修改为 test: /.(css|less)$/,

在这个test的下面找到use，添加loader

  use: [  
    {...},
    {...},
    {
      loader: require.resolve("less-loader") // compiles Less to CSS
    }
  ],

ok，以上两种方式修改配置，按需选择。
我比较钟意第二种方法，毕竟暴露了webpack配置，更灵活。
如果引入Antd，可能依赖于引入Less，
如果不想引入Antd，可以舍弃Antd部分，按步骤引入Less。

简书

GPU云服务器云服务器 create-react-app less antd less2

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94931.html

通过create-react-app从零搭建react环境

摘要：通过文件可以对图标名称等信息进行配置。注意，注册的只在生产环境中生效，并且该功能只有在下才能有效果该文件是过滤文件配置该文件是描述文件定义了项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。一、快速开始：全局安装脚手架： $ npm install -g create-react-app 通过脚手架搭建项目： $ create-react-app 开始项目： ...

Cympros 2019-08-02 16:02 评论0 收藏0
通过create-react-app从零搭建react环境

摘要：通过文件可以对图标名称等信息进行配置。注意，注册的只在生产环境中生效，并且该功能只有在下才能有效果该文件是过滤文件配置该文件是描述文件定义了项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。一、快速开始：全局安装脚手架： $ npm install -g create-react-app 通过脚手架搭建项目： $ create-react-app 开始项目： ...

CoyPan 2019-08-22 18:05 评论0 收藏0
初探react技术栈（一）

摘要：相信用的同学也不少找到函数在其中中添加启用编译。。。react 最近已经开始使用react技术栈了，从头开始搭建项目，有必要的记录一下配置的过程以及项目分层的思路，这次后台项目采用的主要采用react-create-app脚手架以及Ant DesignUI 以及多语言react-intl create-react-app 这是官方维护的脚手架应用我们一般也采用这个 $ npm or c...

刘玉平 2019-05-23 16:23 评论0 收藏0
初探React技术栈（一）

react 最近已经开始使用react技术栈了，从头开始搭建项目，有必要的记录一下配置的过程以及项目分层的思路，这次后台项目采用的主要采用react-create-app脚手架以及Ant DesignUI 以及多语言react-intl create-react-app 这是官方维护的脚手架应用我们一般也采用这个 $ npm or cnpm $ npm install create-react...

neroneroffy 2019-08-26 13:53 评论0 收藏0
采用React+Ant Design组件化开发前端界面(一)

摘要：基础知识使用脚手架创建项目并启动安装脚手架使用脚手架创建项目为项目名。否则可能导致项目发布上线后，报错无法执行。安装测试使用注意默认情况下安装的需要引入才会生效样式，但很多时候，我们只是使用了部分组件，引入整个样式文件，有些得不偿失。 showImg(http://upload-images.jianshu.io/upload_images/2774022-8d65190f1b972c...

cppprimer 2019-08-30 15:54 评论0 收藏0