github地址

配置文档

环境变量

λ yarn add classnames lodash @material-ui/core react-router-dom mobx mobx-react rxjs
λ yarn add babel-plugin-react-html-attrs @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties babel-plugin-import --dev

创建tsx

λ npx create-react-app my-app --template typescript
yarn create react-app my-app

// or

npx create-react-app my-app
yarn run eject // 显示所有配置文件 "babel": {
"presets": [
"react-app"
],
"plugins": [
["@babel/plugin-proposal-decorators", {
// "decoratorsBeforeExport": true
"legacy": true
}],
["@babel/plugin-proposal-class-properties", {
// "decoratorsBeforeExport": true
"loose": true
}],
["import", {
"libraryName": "@material-ui/core",
"libraryDirectory": "",
"camel2DashComponentName": false
}, "@material-ui/core"],
["import", {
"libraryName": "lodash",
"libraryDirectory": "",
"camel2DashComponentName": false
}, "lodash"]
]
},

修改打包路径base url

修改路径的 alias

//    config/webpack.config.dev.js 和 config/webpack.config.prod.js 大概92行

    alias: {
'@': path.resolve(__dirname, '../src'),
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
}, // 使用
import store from '@/store'

package.json -> proxy

  "proxy":"http://localhost:5000"

  let { data } = await axios.get("/users");  // http://localhost:5000/users

多个 proxy

yarn add http-proxy-middleware

// src/setupProxy.js
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy("/api", { targe: "http://localhost:5000" }) // axios('/api/hello') => http://localhost:5000/api/hello
app.use(proxy("/yii", { targe: "http://localhost:5001" }) // axios('/yii/hello') => http://localhost:5001/yii/hello
};

删除.map文件

// scripts/build.js
process.env.GENERATE_SOURCEMAP = false;

polyfill

开启兼容 ie11

yarn add react-app-polyfill

// src/index.js
import 'react-app-polyfill/ie11';

打包优化 babel-minify

npm install babel-minify-webpack-plugin --save-dev

// webpack.config.prod.js
const MinifyPlugin = require("babel-minify-webpack-plugin");
module.exports = {
plugins: [
new MinifyPlugin({}, { comments: false }),
]
}

打包优化 DllPlugin

// 先修改 webpack.config.prod.js

const config2 = [
{
name: "vendor",
mode: "production",
entry: [
"react",
"react-dom",
"lodash",
"axios",
"classnames",
"@material-ui/core",
"mobx",
"mobx-react",
"react-router-dom",
],
output: {
path: path.resolve(__dirname, "..", "public"),
filename: "vendor.js",
library: "vendor_[hash]",
},
plugins: [
new webpack.DllPlugin({
context: __dirname,
name: "vendor_[hash]",
path: path.resolve(__dirname, "..", "public/manifest.dll.json"),
}),
],
},
{
name: "app",
mode: "production",
dependencies: ["vendor"],
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require("../public/manifest.dll.json"),
}),
]
}
] module.exports = config2; // 再修改 scripts/build.js 102行
const publicPath = config[1].output.publicPath; // 修改 public/index.html
<script src="%PUBLIC_URL%/vendor.js"></script>

打包优化 HappyPack

webpack.config.prod.js

// webpack.config.prod.js
yarn add happypack --dev const HappyPack = require("happypack");
const os = require("os");
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); plugins: [
new HappyPack({
id: "js",
loaders: [
{
loader: "babel-loader",
},
],
threadPool: happyThreadPool,
}),
]

打包优化 UglifyJsPlugin

yarn add uglifyjs-webpack-plugin --dev

// webpack.config.prod.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

  plugins: [
new UglifyJsPlugin({
test: /\.js($|\?)/i,
cache: true,
})
]

使用隧道代替 localhost:3000

需要在 devserver 中配置白名单

// webpackDevServer.config.js

    allowedHosts: ["a.domin.com"],

react-create-app的更多相关文章

  1. react create app ,nginx服务器配置

    server{ listen 80; server_name www.domain.com domain.com; location ~* \.js$ { root /home/hard/Projec ...

  2. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  3. React Native APP结构探索

    APP结构探索 我在Github上找到了一个有登陆界面,能从网上获取新闻信息的开源APP,想来研究一下APP的结构. 附上原网址:我的第一个React Native App 具体来讲,就是研究一个复杂 ...

  4. React Native App设置&Android版发布

    React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native un ...

  5. React Native & app demos

    React Native & app demos https://github.com/ReactNativeNews/React-Native-Apps https://github.com ...

  6. 10 个打造 React.js App 的最佳 UI 框架

    10 个打造 React.js App 的最佳 UI 框架 在本文中,我们将分享一些助你打造 React.js App 最佳的 UI 框架.它们具备你所需要的基本 React 组件,以及易用的 API ...

  7. how to solve error when start Hyper-V quick create app error

    After checked the requirements on Hyper-v by run "systeminfo.exe" in cmd window, then I en ...

  8. React & Desktop App

    React & Desktop App https://proton-native.js.org/#/ https://github.com/kusti8/proton-native

  9. [译] Facebook:我们是如何构建第一个跨平台的 React Native APP

    英文原文(需FQ):https://code.facebook.com/posts/1189117404435352/ 早些时候,我们介绍过iOS版的React Native. React Nativ ...

  10. [React] Create & Deploy a Universal React App using Zeit Next

    In this lesson, we'll use next to create a universal React application with no configuration. We'll ...

随机推荐

  1. 转: linux centos7 下安装maven

    转: https://www.tecmint.com/install-apache-maven-on-centos-7/

  2. 配置带用户权限的docker registry v2

    v1版本的docker registry用nginx配置,v2版本的用nginx有些问题,客户端总是会请求到v1/下面去, 以下从 http://blog.csdn.net/felix_yujing/ ...

  3. 数组去重Demo引出的思考

    package com.pers.Stream; import java.util.*; import java.util.stream.Collectors; import java.util.st ...

  4. react diff 原理

    (1) 把树形结构按照层级分解,只比较同级元素.(2) 列表结构的每个单元添加唯一的 key 属性,方便比较.(3) React 只会匹配相同 class 的 component(这里面的 class ...

  5. GIMP使用笔记

    一:背景透明化 1:选中背景:选择——按颜色——点击图片背景 2:透明化:图层——透明化——颜色到Alpha——选择背景颜色,转换为alpha透明 二:裁剪图片 1:选择:工具箱——选择套具——使用套 ...

  6. Unable to find a @SpringBootConfiguration, you need to use @ContextConfiguration or @SpringBootTest(classes=...) with your test java.lang.IllegalStateException

    不能找到对应的带有@SpringBootConfiguration 的类,你需要将它放在包的最顶层.

  7. ssh的用户配置文件config管理ssh会话

    抄的这个: https://www.cnblogs.com/zhonghuasong/p/7236989.html 只是在这里留个存档,防止删除 我有这样的需求就是,因为需要ssh连接到服务器,然后每 ...

  8. HDU 1022.Train Problem I【栈的应用】【8月19】

    Train Problem I Problem Description As the new term comes, the Ignatius Train Station is very busy n ...

  9. oracle 在已有表新增列内批量加数据

    创建每列随机值的语句 create table TEST_ZHAA01A_03 as select rownum as id, to_char(sysdate + rownum/24/3600, 'y ...

  10. 转:图像处理、显示中的行宽(linesize)、步长(stride)、间距(pitch)

    在图像数据传输和显示的过程中有一个不常用的参数:间距. 间距的名称: 它有很多的别名,在使用d3d显示的时候,它叫pitch:在用ffmpeg解码的时候,它叫linesize: 在用ffmpeg转换格 ...