creat-react-app 其他 2020-02-27 13:17:34 阅读次数: 0

以此文章记录如何创建一个react app和一些常用配置，会不定期更新

1.1、安装

# 全局安装
npm install -g create-react-app

1.2、创建一个app项目

# 构建一个my-app的项目
npm init react-app my-app

1.3、启动编译

npm start

2、webpack配置

2.1、react-app-rewired

使用 react-app-rewired 添加或修改 webpack 的 配置

2.1.1、安装

npm i react-app-rewired --save-dev

2.1.2、修改package.json

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

2.1.3、新建配置文件

在根目录下新建config-override.js

(1) 配置路径

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

(2) 配置 loader

大专栏  creat-react-appss="headerlink" title="2.2、proxy代理配置">2.2、proxy代理配置

2.2.1、安装

npm http-proxy-middleware -dev

2.2.2、 新建配置文件

const proxy = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(
        proxy('/api', {
            target: 'http://localhost:4000',
            changeOrigin: true,
            pathRewrite: {
                "^/api": ""
            }
        })
    );
    app.use(proxy(...));
};

注意：代理路径匹配是懒惰的，当满足正则时则停止匹配。因此，当添加多个代理配置时，要注意代理路径的冲突，如：

app.use(
    proxy('/api/', {
        target: 'http://localhost:3000',
    })
);
app.use(
    proxy('/api2',{
        target: 'http://localhost:4000',
    })
);

当请求路径为/api2/audio 时，我们想代理到 4000端口，但 却被3000端口代理了，这是因为/api满足/api2,则我们在配置时应该参照如下：

app.use(
    proxy('/api', {
        target: 'http://localhost:3000',
    })
);
app.use(
    proxy('/api2/',{
        target: 'http://localhost:4000',
    })
);

× 请我吃糖~