一、腳手架create-react-app使用
$ npm install -g create-react-app
# 注意：工具會自動初始化一個腳手架并安裝 React 項目的各種必要依賴，如果在過程中出現(xiàn)網(wǎng)絡(luò)問題，請嘗試配置代理或使用其他 npm registry。
$ create-react-app my-app
$ cd my-app
$ npm start
打開 http://localhost:3000/ 訪問你的應(yīng)用。
二、引入 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的配置
現(xiàn)在 如果你正在搭建react運行環(huán)境，使用 create-react-app 去自動構(gòu)建你的app程序。你的項目所在的文件夾下是沒有配置文件。react-scripts 是唯一的 額外的 構(gòu)建依賴在你的package.json中，你的運行環(huán)境將有每一個你需要用來構(gòu)建一個現(xiàn)代React app應(yīng)用程序。你需要的依賴，和在配置文件中編寫的配置代碼，react-scripts 都幫你寫了，比如：react-scripts幫你自動下載需要的 webpack-dev-server 依賴，然后react-scripts自己寫了一個nodejs服務(wù)端的腳本代碼 start.js來 實例化 WebpackDevServer ，并且運行啟動了一個使用 express 的Http服務(wù)器，現(xiàn)在你只需要專心寫src源代碼就可以了。省去了很多精力，最適合快速上手一個demo了。
有兩種操作：
- 通過react-app-rewired插件，react-app-rewired的作用就是在不eject的情況下，覆蓋create-react-app的配置。如果已經(jīng)eject導(dǎo)出了配置，就沒有必要使用react-app-rewired。使用插件的方法見官方文檔,插件的相關(guān)介紹見參考網(wǎng)址
這個插件可以在不更改原始配置腳本的前提下更改默認(rèn)配置，加一些plugins, 或者loaders，比如antd按需加載樣式、less文件識別 。
create-react-app項目打包相關(guān)問題
Create-React-App創(chuàng)建antd-mobile開發(fā)環(huán)境
成功完成步驟
按照官網(wǎng)步驟
在 create-react-app 中使用
安裝和初始化#
我們需要在命令行中安裝 create-react-app 工具，你可能還需要安裝 yarn。
$ npm install -g create-react-app yarn
然后新建一個項目。
$ create-react-app antd-demo
工具會自動初始化一個腳手架并安裝 React 項目的各種必要依賴，如果在過程中出現(xiàn)網(wǎng)絡(luò)問題，請嘗試配置代理或使用其他 npm registry。
然后我們進(jìn)入項目并啟動。
$ cd antd-demo
$ yarn start
此時瀏覽器會訪問 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。
引入 antd#
這是 create-react-app 生成的默認(rèn)目錄結(jié)構(gòu)。
├── 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
現(xiàn)在從 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;
}
...
好了，現(xiàn)在你應(yīng)該能看到頁面上已經(jīng)有了 antd 的藍(lán)色按鈕組件，接下來就可以繼續(xù)選用其他組件開發(fā)應(yīng)用了。其他開發(fā)流程你可以參考 create-react-app 的官方文檔。
高級配置(按官網(wǎng),我的項目報錯)
我們需要對 create-react-app 的默認(rèn)配置進(jìn)行自定義。可以使用 eject 命令將所有內(nèi)建的配置暴露出來。
yarn run eject
按需加載
babel-plugin-import 是一個用于按需加載組件代碼和樣式的 babel 插件（原理），現(xiàn)在我們嘗試安裝它并修改 config/webpack.config.dev.js 文件。
$ yarn add babel-plugin-import --save-dev
注意，由于 create-react-app eject 之后的配置中沒有 .babelrc 文件，所以需要把配置放到 webpack.config.js 或 package.json 的 babel 屬性中。
然后按照官網(wǎng)的修改config/webpack.config.dev.js報錯(只有config/webpack.config.js)
所以在網(wǎng)上查找了另一種方式,修改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出錯問題解決
