前端ui框架 Antd For React(Webpack)总结

### 总结一下使用阿里的antd这个ui框架的正确姿势(官网推荐的按需加载方式)

1 本文针对在现有项目中引入antd

2 二话不说: npm install antd --save

3 在babelrc文件中加入:

{

  "plugins": [

    ["import", { "libraryName": "antd", "style": "css" }]

  ]

}

如果babelrc文件已有其他的plugins，那就将["import",

{ "libraryName": "antd", "style": "css" }]这段放到plugins数

组里。

4 执行: npm install babel-plugin-import --save-dev
babelrc文件中import是需要安装babel-plugin-import插件的。

5 使用:

import { DatePicker } from 'antd';

ReactDOMrender(<DatePicker />, mountNode);

PS:按需加载方式只需从 antd 引入模块即可，无需单独引入样式

6 问题:

如果有样式无效的情况,可能是webpackproductionconfigjs文件中:

module: {

        loaders: [

            {test: /\css$/, exclude: /node_modules/, loader:

            ExtractTextPluginextract('style', 'css!postcss')},

        ]

    }

    包含了exclude: /node_modules/，这样会排除node_modules文件夹下的样式，去掉exclude: /node_modules/再试试。

开箱即用的webpack优化和压缩代码解决方案，这避免了与传统Electron 应用程序相关的性能瓶颈。

Electron

React, Redux, React Router,

Webpack

React Hot Loader
测试环境：Windows 10 V1903

# 从Github快速克隆:

#命令行到项目目录

# yarn安装依赖
#运行

运行成功
#构建

#打包
建议使用VSCode安装以下扩展，只为了让你有更好的体验，以及提高编码效率

项目的目录和开发基本的React应用相差不大
有了Electron React Boilerplate可以省去我们很多基础工作的时间，对于熟悉React的人来说尤为友好！

搭建基于redux、react-redux、iron-redux的脚手架，此demo仅做个人练习使用。
Home目录是react-redux;
Iron目录是iron-redux。

yarn create react-app antd-demo-ts --template typescript

找到webpackconfigjs，添加

然后在module对象中的rules中解析less

添加lib-flexible和postcss-pxtorem

在indextsx引入lib-flexible

在webpackconfigjs中配置postcss-pxtore插件，在postcssOptions中配置

antd-mobile官网

这篇文章是记录一下我刚刚部署的过程倒不是怕忘记，只是部署花了我蛮长时间的，然而最后明白了之后，才发现超级简单

所以写这篇文章用来帮助那些和我一样的小白

首先我用create-react-app搭建了一个react项目(这一步 *** 作大家可以去官网看 >使用到的技术
spring boot
spring data jpa
spring data rest
reactjs
fetchjs
material-ui

先把要点记一下：

pomxml

blogjava

@BlogRepository

DatabaseLoaderjava

springdatarestbase-path=/api

package comexample;

import orgspringframeworkbootSpringApplication;
import orgspringframeworkbootautoconfigureSpringBootApplication;
import orgspringframeworkcontextannotationBean;
import orgspringframeworkwebservletconfigannotationCorsRegistry;
import orgspringframeworkwebservletconfigannotationWebMvcConfigurer;
import orgspringframeworkwebservletconfigannotationWebMvcConfigurerAdapter;

@SpringBootApplication//等价与以默认属性使用@Configuration，@EnableAutoConfiguration和@ComponentScan
public class DemoApplication {

}

{
"name": "myblog",
"version": "100",
"description": "",
"main": "indexjs",
"scripts": {
"dev": "WEBPACK_ENV=dev webpack-dev-server --host 127001 --port 3000 --devtool eval --progress --colors --hot --content-base dist",
"build": "WEBPACK_ENV=build /node_modules/bin/webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"material-ui": "^0164",
"react": "^1532",
"react-dom": "^1532",
"react-tap-event-plugin": "^100",
"whatwg-fetch": "^201"
},
"devDependencies": {
"babel-core": "^6182",
"babel-loader": "^627",
"babel-preset-es2015": "^6180",
"babel-preset-react": "^6160",
"css-loader": "^0250",
"html-webpack-plugin": "^2241",
"react-hot-loader": "^130",
"style-loader": "^0131",
"webpack": "^1133",
"webpack-dev-server": "^1162"
}
}

​ 还是直接上原话吧

​ A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

​ 翻译成人话，react是用来构建前端界面的，稍微专业一点，澄清一个可能被大家误解的概念，react不是mvc框架，

而是构建mvc里面view这部分的库，至于其他部分采用什么技术react并不限制。

​ 一句话，react就是构建用户界面的。

​ 1因为它火，学它能找好工作涨工资

​ 2那么为啥它火？因为他牛逼，为啥牛逼，我们下面就说。

​ 既然说了它牛逼，那么我们就从三个部分去说说。

​ 涉及到简单的基础知识，比如安装，配置，基础知识和简要的小例子

​ 实际上线react应该如何做，比如使用可以构建版本的react，模块化，和压缩等。

​ 我们研究下看看react如何实习它说的用js写原生应用。

​ 官网： >