/react-by-ts

基于creact-react-app创建typescript的应用

Primary LanguageTypeScript

Create an app called react-by-ts

create-react-app react-by-ts --typescript

How to rewire your create-react-app project

实现对默认配置自定义，例如扩展 Create React App 的webpack配置

  1. Install package
npm install react-app-rewired customize-cra --save-dev
  1. Create a config-overrides.js in the root directory
// config-overrides.js
const { override, fixBabelImports} = require('customize-cra');
module.exports = override(
  // 按需加载
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'
  })
)
  1. 'Flip' the existing calls to react-scripts in npm script for start,build and test
  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}
  1. Start the Dev Server
$ npm start
  1. Build your app
$ npm run build

set proxy in development environment

  1. install package
npm install http-proxy-middleware http-server -D
  1. create file setupProxy.js in the src directory
// setupProxy.js
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  // 当请求 http://localhost:3000/api/employee/getEmployee.action 时 代理到 http://localhost:4000/employeee/getEmployee.json
  app.use('/api/**/*.action', proxy({
    target: 'http://localhost:4000',
    pathRewrite(path) {
      return path.replace('/api', '/').replace('.action', '.json')
    }
  }))
}
  1. 添加一个命令在package.json
// && 表示串行执行
// &  表示并行执行
"server": "cd mock && hs -p 4000 -a localhost"

Environment Variables

  1. Adding Environment Variables In .env in the root of your project
REACT_APP_WEBSITE_TITLE = Typescript in Action By Typescript
# also works
# REACT_APP_VERSION = ${npm_package_version}
REACT_APP_VERSION = $npm_package_version
  1. Referencing Environment Variables in the HTML
<title>%REACT_APP_WEBSITE_TITLE%</title>
  1. Referencing Environment Variables in the Javascript
render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_WEBSITE_TITLE} />
      </form>
    </div>
  );
}

deploy my project

  1. npm run build
  2. 预览
  • 方式1
yarn global add serve
serve -s build // 在当前目录下启动即可开启一个默认的5000端口的本地服务，如果说此命令不存在，则需要配置环境变量
  • 还有其他方式。。。暂时不研究

代码部署线上

nginx部署到根目录下

  1. 进入/etc/nginx/conf.d目录下，修改文件default.conf

    server {
  listen  80;
  server_name  test.com; // 你的域名或者IP地址

  location / { // 根目录
    root  /usr/local; // 前端文件路径
    index  index.html; // hash模式只配置访问html就可以了
    try_files $uri $uri/ /index.html; // history模式下
  }
}

  2. 修改完成之后，重启nginx:nginx -s reload

  3. 访问：域名|IP地址即可

nginx部署到子目录下

  1. 进入/etc/nginx/conf.d 目录下，修改文件default.conf
server {
  listen  80;
  server_name  test.com; // 你的域名或者ip地址

  location /demo { // 子级目录
    alias  /front/demo; // 前端也要配置二级目录，react项目是在环境配置文件中配置属性PUBLIC_URL=/demo,把前端打包的build目录下的内容，放在服务器对应的二级目录下demo下
    index  index.html;
    try_files $uri $uri/ /demo/index.html; 
  }
}
  1. 修改完成之后，重启nginx服务：nginx -s reload
  2. 访问：域名|ip地址/demo 即可

nginx利用反向代理调试后台接口

server {
  listen: 80;
  server_name: test.com;

  location ^~ /api/ {
    proxy_pass 后台接口地址(例如：http://localhost:2001);
  }
}
// 解释： 当请求test.come/api/a 接口时会转发到 http://localhost:2001/api/a;
// 如果代理地址是：http://localhost:2001/, 以/结尾，接口会转发到 http://localhost:2001/a

​