基于create-react-app的再配置

2018-06-24 01:34:52来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

前面的话

  使用Facebook官方推出的create-react-app脚手架,我们基本可以零配置搭建基于webpack的React开发环境。但是,如果需要个性化定制,则还需要基于create-react-app进行再配置

 

环境变量

【设置】

  在根目录下新建.env文件,可以用于本地环境变量覆盖

  如在该文件中进行如下设置

PORT=2000

  则开发服务器会在2000端口开启服务

【默认】

  默认支持的环境变量有: NODE_ENV 和 PUBLIC_URL

  NODE_ENV: 该变量是自动赋值的,你不可以更改它的值,对于npm start, 它的值是develepment, npm test它的值是test, 对于npm run build, 它的值是production

  PUBLIC_URL: 这个变量可以用于引用模块系统之外的资源路径前缀

【区分环境】

  一般地,在开发端,会使用redux-logger在控制台显示触发action时的日志,但在生产端,则完全不需要。可以使用NODE_ENV环境变量来区分环境

let store = null
if (process.env.NODE_ENV === 'development') {
  store = createStore(rootReducer, applyMiddleware(thunk, logger))
} else {
  store = createStore(rootReducer, applyMiddleware(thunk))
}

【外部资源】

  如果要设置静态资源CDN,则需要在.env文件中设置PUBLIC_URL

PUBLIC_URL = 'cdn url'

  在HTML中使用

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

  在Javascript中使用

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />

【自定义】

  可以自定义环境变量,不过需要遵照一个约定,所有自定义环境变量均以REACT_APP_开头

  这些环境变量会定义在process.env中。例如,环境变量REACT_APP_SECRET_CODE会在JS中暴露为process.env.REACT_APP_SECRECT_CODE

【更新】

  目录react-scripts最新版本是1.1.4,以如下方式进行更新

npm install --save --save-exact react-scripts@1.1.4

 

配置代理

  在package.json中配置,与其他项目同级

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": {
    "/api": {
      "target": "https://m.weibo.cn",
      "changeOrigin": true,
      "pathRewrite":{"^/api":""}
    }
  }

  由于create-react-app默认支持fetch,所以在组件中使用fetch获取数据,结果显示在了控制台中

fetch('api/comments/show?id=4199740256395164&page=1').then(res => {
  res.json().then(data => {
    console.log(data)
  })
})

 

配置别名

【rewire】

  使用react-app-rewired来进行react的再配置,首先使用npm安装

$ npm install react-app-rewired --save-dev

  然后,更改package.json中的scripts部分

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app eject"
  },

  然后,在根目录新建config-overrides.js文件,配置如下

const path = require('path');
function resolve(dir) {
    return path.join(__dirname, '.', dir)
}
module.exports = function override(config, env) {
    config.resolve.alias = {
        '@': resolve('src')
    }
    return config;
}

  重启开发服务器后,就可以使用@来表示'src'的绝对路径了

【eject】

  或者,npm run eject之后 ,直接更改config目录下的dev.js和prod.js文件中的alias设置

    alias: {
      '@': path.join(__dirname, '..', 'src'),
      ... 
    },

 

配置eslint

  安装插件

npm install react-app-rewired react-app-rewire-eslint --save

  在根目录下新建.eslint.js文件,文件中一定要添加如下配置

module.exports = {
  "parser":"babel-eslint",
    ...

  否则,会报下面的错误

Parsing error: Unexpected token =

 

配置PWA

  create-react-app中有默认的service worker设置,但是没有对接口缓存进行处理

  下面对SWPrecacheWebpackPlugin插件的配置增加如下处理

runtimeCaching: [{
    urlPattern: '/',
    handler: 'networkFirst'
  },
  {
    urlPattern: /\/(posts|categories|recommends|users)/,
    handler: 'networkFirst'
  },
  {
    urlPattern: '/posts/:id',
    handler: 'networkFirst'
  }
]

   

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:gulp入门学习教程(入门学习记录)

下一篇:es6总结(二)