一、脚手架create-react-app使用
$ npm install -g create-react-app
# 注意：工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
$ create-react-app my-app
$ cd my-app
$ npm start
打开 http://localhost:3000/ 访问你的应用。
二、引入 antd-mobile
npm install antd-mobile --save
修改 index.html
<!DOCTYPE html>
<html>
<head>
<!-- set `maximum-scale` for some compatibility issues -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
</head>
<body></body>
</html>
- fastclick.js是解决移动端300ms延迟的方案。
- 有些浏览器不支持promise，需要引入es6-promise支持
Q2. 如何修改create-react-app的配置
现在 如果你正在搭建react运行环境，使用 create-react-app 去自动构建你的app程序。你的项目所在的文件夹下是没有配置文件。react-scripts 是唯一的 额外的 构建依赖在你的package.json中，你的运行环境将有每一个你需要用来构建一个现代React app应用程序。你需要的依赖，和在配置文件中编写的配置代码，react-scripts 都帮你写了，比如：react-scripts帮你自动下载需要的 webpack-dev-server 依赖，然后react-scripts自己写了一个nodejs服务端的脚本代码 start.js来 实例化 WebpackDevServer ，并且运行启动了一个使用 express 的Http服务器，现在你只需要专心写src源代码就可以了。省去了很多精力，最适合快速上手一个demo了。
有两种操作：
- 通过react-app-rewired插件，react-app-rewired的作用就是在不eject的情况下，覆盖create-react-app的配置。如果已经eject导出了配置，就没有必要使用react-app-rewired。使用插件的方法见官方文档,插件的相关介绍见参考网址
这个插件可以在不更改原始配置脚本的前提下更改默认配置，加一些plugins, 或者loaders，比如antd按需加载样式、less文件识别 。
create-react-app项目打包相关问题
Create-React-App创建antd-mobile开发环境
成功完成步骤
按照官网步骤
在 create-react-app 中使用
安装和初始化#
我们需要在命令行中安装 create-react-app 工具，你可能还需要安装 yarn。
$ npm install -g create-react-app yarn
然后新建一个项目。
$ create-react-app antd-demo
工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
然后我们进入项目并启动。
$ cd antd-demo
$ yarn start
此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。
引入 antd#
这是 create-react-app 生成的默认目录结构。
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ └── logo.svg
└── yarn.lock
现在从 yarn 或 npm 安装并引入 antd。
$ yarn add antd --save
修改 src/App.js，引入 antd 的按钮组件。
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>
);
}
}
export default App;
修改 src/App.css，在文件顶部引入 antd/dist/antd.css。
@import '~antd/dist/antd.css';
.App {
text-align: center;
}
...
好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的官方文档。
高级配置(按官网,我的项目报错)
我们需要对 create-react-app 的默认配置进行自定义。可以使用 eject 命令将所有内建的配置暴露出来。
yarn run eject
按需加载
babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config/webpack.config.dev.js 文件。
$ yarn add babel-plugin-import --save-dev
注意，由于 create-react-app eject 之后的配置中没有 .babelrc 文件，所以需要把配置放到 webpack.config.js 或 package.json 的 babel 属性中。
然后按照官网的修改config/webpack.config.dev.js报错(只有config/webpack.config.js)
所以在网上查找了另一种方式,修改package.json文件
安装完antd和babel-plugin-import后，修改根目录下的package.json babel处新增
"plugins":[["import", {"libraryName": "antd", "style": "css"}]]
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
npm run install 后再启动项目 npm run start
能够安全启动
选自create-react-app 按需加载antd出错问题解决
网友评论