使用Facebook 官方推出Create-React-App脚手架搭建基于webpack的React开发环境
前言
使用Facebook 官方推出Create-React-App脚手架，搭建基于webpack2的React开发环境。本文需要有npm、webpack的基础知识。 版本 "antd-mobile": "^1.3.0", "react": "^15.6.0", "webpack": " 2.4.1"
传送门：
第一部分：概念 · webpack 中文文档(2.2)
npm scripts 使用指南 - 阮一峰的网络日志
参考资料链接：
Create-React-App创建antd-mobile开发环境 - 简书
在 create-react(-native)-app 中使用 - Ant Design
快速开始
npm install -g create-react-app // 安装create-react-app
create-react-app myapp // 创建应用,myapp 为项目名
cd myapp
npm start // 启动项目
npm run eject // 显示隐藏的webpack配置文件
引入 antd-mobile
首先从 yarn 或 npm 安装 antd-mobile 与开发依赖：
babel-plugin-import（一个用于按需加载组件代码和样式的 babel 插件（原理））
svg-sprite-loader需指定0.3.1版本,其他版本可能会造成svg无法显示
postcss-pxtorem ant-mobile高清配置方案
npm
npm install antd-mobile //引入 antd-mobile
npm install --save--dev babel-plugin-import svg-sprite-loader@0.3.1 less less-loader postcss-pxtorem // 安装开发依赖
yarn
yarn add antd-mobile
yarn add --dev babel-plugin-import svg-sprite-loader@0.3.1 less less-loader postcss-pxtorem
修改config 下的webpack.config.dev.js文件
这里以webpack.config.dev.js(开发环境) 举例，webpack.config.prod.js(生产环境) 一样配置即可：
resolve:{
...
extensions: ['.web.js', '.js', '.json', '.jsx'],
...
}
rules: [
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
/\.less$/, //新增项
/\.svg$/, //新增项
],
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
...
options: {
plugins: [
['import', { libraryName: 'antd-mobile', style: true }],
],
cacheDirectory: true,
}
},
{
test: /\.(svg)$/i,
loader: 'svg-sprite-loader',
include: [
require.resolve('antd-mobile').replace(/warn\.js$/, ''), // antd-mobile内置svg
// path.resolve(__dirname, '../src/myAppSvg'), // 使用自定义svg
]
},
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
require.resolve('css-loader'),
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
plugins: () => [
autoprefixer({
browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
}),
require('postcss-pxtorem')({ rootValue: 100, propWhiteList: [] })
],
},
},
{
loader: require.resolve('less-loader'),
options: {
modifyVars: { "@primary-color": "#1DA57A" },
},
},
],
}
]
ant－mobile内置只有十几个svg图标，如果需要更多antd mobile svg素材：
ant-design/ant-design-icons: svg icons for ant-design-mobile
antd mobile高清方案设置
antd-mobile 需要的webpack配置上面已经配置过了，只需要在 myapp > public > index.html 文件头部加上如下代码即可：
<script>(function(baseFontSize,fontscale){var _baseFontSize=baseFontSize||100;var _fontscale=fontscale||1;var win=window;var doc=win.document;var ua=navigator.userAgent;var matches=ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);var UCversion=ua.match(/U3\/((\d+|\.){5,})/i);var isUCHd=UCversion&&parseInt(UCversion[1].split('.').join(''),10)>=80;var isIos=navigator.appVersion.match(/(iphone|ipad|ipod)/gi);var dpr=win.devicePixelRatio||1;if(!isIos&&!(matches&&matches[1]>534)&&!isUCHd){dpr=1}var scale=1/dpr;var metaEl=doc.querySelector('meta[name="viewport"]');if(!metaEl){metaEl=doc.createElement('meta');metaEl.setAttribute('name','viewport');doc.head.appendChild(metaEl)}metaEl.setAttribute('content','width=device-width,user-scalable=no,initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale);doc.documentElement.style.fontSize=_baseFontSize/2*dpr*_fontscale+'px';window.viewportScale=dpr})();if(!window.Promise){document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>')}</script>
参考链接：
ant design mobile 0.9.x 高清方案 webpack 配置 - 半桶水 - SegmentFault
antd mobile 0.8 以上版本「高清」方案设置 · ant-design/ant-design-mobile Wiki
试运行
未修改App.js文件直接运行时，会出现svg解析报错，忽略不管，使用antd mobile的Icon标签添加svg即可。
找到src下的App.js文件将其改成如下：
import React, { Component } from 'react';
import { NavBar, Icon } from 'antd-mobile';
class App extends Component {
render() {
return (
<div className="App">
<NavBar leftContent="back"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
<Icon key="0" type="search" style={{ marginRight: '0.32rem' }} />,
<Icon key="1" type="ellipsis" />,
]}
>NavBar</NavBar>
</div>
);
}
}
export default App;
最后 npm start 运行～ 出现导航栏说明配置成功了
其他
最后放一下package.json 文件 以及src项目结构
src // 业务代码目录，或者叫 app
|--actions // 定义 Redux 的各个 action
|--components // 定义项目中的各个组件，里面可能有很多个子文件夹
|--config // 项目配置，无具体规定，自由发挥
|--constants // 定义 Redux 中用到的各个常量
|--container // 定义项目中的所有的页面
|--fetch // 定义项目中所有数据获取、提交的方法
|--mysvg // 项目svg文件
|--reducers // 定义 Redux 的 reducer 规则
|--router // 定义项目中的 router 规则
|--store // 定义 Redux 的全局 store 对象
`--utils // 工具函数，例如时间格式的处理等
package.json
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd-mobile": "^1.3.0",
"react": "^15.6.0",
"react-dom": "^15.6.0"
},
"devDependencies": {
"autoprefixer": "7.1.0",
"babel-core": "6.24.1",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.0.0",
"babel-plugin-import": "^1.2.1",
"babel-preset-react-app": "^3.0.0",
"babel-runtime": "6.23.0",
"case-sensitive-paths-webpack-plugin": "1.1.4",
"chalk": "1.1.3",
"css-loader": "0.28.1",
"dotenv": "4.0.0",
"eslint": "3.19.0",
"eslint-config-react-app": "^1.0.4",
"eslint-loader": "1.7.1",
"eslint-plugin-flowtype": "2.33.0",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "5.0.3",
"eslint-plugin-react": "7.0.1",
"extract-text-webpack-plugin": "2.1.0",
"file-loader": "0.11.1",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.28.0",
"jest": "20.0.3",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.0.0",
"postcss-loader": "2.0.5",
"postcss-pxtorem": "^4.0.1",
"promise": "7.1.1",
"react-dev-utils": "^3.0.0",
"react-error-overlay": "^1.0.7",
"style-loader": "0.17.0",
"svg-sprite-loader": "0.3.1",
"sw-precache-webpack-plugin": "0.9.1",
"url-loader": "0.5.8",
"webpack": "2.6.1",
"webpack-dev-server": "2.4.5",
"webpack-manifest-plugin": "1.1.0",
"whatwg-fetch": "2.0.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js?(x)",
"<rootDir>/src/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
}
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
