create-react-app笔记

创建项目

npm install -g create-react-app

create-react-app demo

cd demo

npm run eject

必备组件

npm install redux redux-thunk react-redux react-router react-router-dom --save

npm install fastclick axios jsonp --save

npm installreact-copy-to-clipboard--save

npm install styled-components --save-dev

npm install http-proxy --save-dev

npm install less less-loader --save-dev

npm install babel-plugin-transform-decorators-legacy --save-dev

cnpm install eslint-config-react-app --save-dev

【支持LESS】

修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件：

搜索“/\.css”，修改规则为/\.css|.less$/,use -> {loader: require.resolve('less-loader')} // 编译less为css

【添加路径映射】

修改paths.js配置文件：

搜索“module.exports”，增加项：

port: 8080, 

appComponents: resolveApp('src/components'),

appContainers: resolveApp('src/containers'),

appStore: resolveApp('src/store'),

appRouter: resolveApp('src/router'),

appUtils: resolveApp('src/utils'),

appHelpers: resolveApp('src/helpers'),

appBridge: resolveApp('src/bridge')

修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件：

搜索“alias”，添加项

'@': paths.appSrc,

'components': paths.appComponents,

'containers': paths.appContainers,

'store': paths.appStore,

'bridge': paths.appBridge,

'utils': paths.appUtils,

'helpers': paths.appHelpers,

小提示：不用redux命名，用store命名是为了防止与类redux冲突

【支持ES7的装饰器】

修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件：

搜索“babel-loader”，在下面的options里添加

plugins: [require.resolve('babel-plugin-transform-decorators-legacy')],

【支持跨域】

修改webpackDevServer.config.js配置文件：

搜索“app.use”，在这下面加上跨域代码

https://github.com/colaboy/seedsui-react/blob/master/config/webpackDevServer.config.js ;

【支持异步redux】

新建store/index.js文件：

import { createStore, applyMiddleware } from 'redux'

// Reducer

import reducer from './modules/reducer.js'

// Middleware: thunk

import thunk from 'redux-thunk';

// Middleware: client

import client from 'components/seedsui/utils/axiosApi.js';

import clientMiddleware from './middleware/clientMiddleware';

// Store

const store = createStore(reducer, applyMiddleware(thunk, clientMiddleware(client)));

export default store

引用到路由上

// Redux

import { Provider } from 'react-redux'

import store from 'store/index.js'

【修改打包根路径】

修改paths.js，找到方法getServedPath，修改servedUrl常量

function getServedPath(appPackageJson) {

  const publicUrl = getPublicUrl(appPackageJson);

  const servedUrl =

    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/h5/react/');

  return ensureSlash(servedUrl, true);

}

【自定义eslint】

根目录新建.eslintrc文件，填写内容：

{

  "extends": "react-app",

  "rules": {

    "no-restricted-globals": 0

  }

}

【端口修改】

在配置好paths.js的文件后

修改start.js，找到const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8080; 修改8080为paths.port

【禁用ejs,使用html-loader编译html文件】

修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件：

找到module下的rules 项，加上

 {

 test: /\.html$/,

 use: [ {

 loader: 'html-loader',

 options: {

 minimize: true

 }

 }],

 },