• 基于create-react-app的再配置


    前面的话

      使用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'
      }
    ]

       

  • 相关阅读:
    Nmap手册
    练习题,新建数据库anyun
    Centos6.5
    七丶人生苦短,我用python【第七篇】
    六丶人生苦短,我用python【第六篇】
    五、人生苦短,我用python【第五篇】
    linux 创建连接命令 ln -s 软连接
    激活phpstorm10.0.1
    php 数组合并方法
    通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效
  • 原文地址:https://www.cnblogs.com/xiaohuochai/p/8491055.html
走看看 - 开发者的网上家园