欢迎光临
我们一直在努力

React.17 基于create-react-app的再配置

文章目录

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

环境变量

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

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

PORT=2000

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

配置代理

  在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)
  })
})

配置别名

  使用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'的绝对路径了

备注:配置装饰器语法

// 参考配置连接:https://www.npmjs.com/package/customize-cra
const {override,addDecoratorsLegacy}=require("customize-cra");

module.exports=override(
    addDecoratorsLegacy(),//配置装饰器模式
);

配置eslint

  安装插件

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

  在根目录下修改config-overrides.js文件

const rewireEslint = require('react-app-rewire-eslint');

function overrideEslintOptions(options) {
  // do stuff with the eslint options...
  return options;
}

/* config-overrides.js */
module.exports = function override(config, env) {
  config = rewireEslint(config, env, overrideEslintOptions);
  return config;
}

附加

一、create-react-app 支持decorators

yarn add @babel/core @babel/plugin-proposal-decorators @babel/preset-env

创建 .babelrc

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ]
    ]
}

创建config-overrides.js

const path = require('path')
const { override, addDecoratorsLegacy } = require('customize-cra')

function resolve(dir) {
    return path.join(__dirname, dir)
}

const customize = () => (config, env) => {
    config.resolve.alias['@'] = resolve('src')
    if (env === 'production') {
        config.externals = {
            'react': 'React',
            'react-dom': 'ReactDOM'
        }
    }

    return config
};

module.exports = override(addDecoratorsLegacy(), customize())

安装依赖

yarn add customize-cra react-app-rewired

修改package.json

...
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
...
赞(0) 打赏
未经允许不得转载:散人研 » React.17 基于create-react-app的再配置
分享到: 更多 (0)

评论 抢沙发

7 + 4 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏