creat-react-app＋ant-mobile 项目结构搭

使用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"
  }
}