Open navydong opened 6 years ago
注: 如未找到配置文件请使用npm run eject弹出配置文件 当前对应版本react 16.2
在开发中往往是跨域请求的,配置一下请求代理可以解决这个问题
// package.json 文件 "proxy": "http://xxx.xxx",
默认情况下在每次修改内容的时候都会刷新页面,有时候我们并不想要这样,比如有一个bug需要重复点击或者重复操作多次才能实现,但是由于我们每次修改都会刷新页面,可能会导致这个bug很难被测试或者实现,这个配置在我看来非常有用,当然这不是必须的,但是可以适当的提高开发效率。在React 的入口文件 src/index.js中,添加一些配置代码。
// src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; ReactDOM.render( <App />, document.getElementById('root') ); // +++++ 加入+++++ if (module.hot) { module.hot.accept(); }
options: { modules: true, localIdentName: '__[local]--[hash:base64:5]' }
其次有其他css局部化解决方案 比如 styled-components 可参考我另外一篇文章 骚里骚气的styled-components快速入门
比如redux或者mobx可以使用@写法
npm install --save-dev babel-plugin-transform-decorators-legacy
插件中使用legacy是因为Babel 5支持处理装饰器,但是它也许会跟最终的标准有区别,所以才使用legacy这个词。
// package.json "babel": { "presets": [ "react-app" ], "plugins": [ // +++ 加入配置 +++ "transform-decorators-legacy", // ...ant配置 ] }
请注意, plugins 的属性非常重要: transform-decorators-legacy 应该放在最前面。 babel 设置有问题?请先查看这个 issue 。
// package.json 文件增加配置
"homepage": ".",
注: 如果直接打开index.html后文件正确加载但页面仍然空白,请检查你是否使用的是 BrowserRouter (同vue的history模式)需要后端配置支持,否则请使用HashRouter 即带 #
当页面嵌套过深时我们会发现在路径通常都要这么写 import xx from './../../../xxx/qqq' 通过配置webpack可以写成 import xx from '@/xxx/qqq'
import xx from './../../../xxx/qqq'
import xx from '@/xxx/qqq'
// 修改 webpack.config.dev 与 webpack.config.prod 两个文件 加入相同配置 ... // +++ 找个开心的地方加入配置 function resolve(dir) { return path.join(__dirname, '..', dir) } // 修改 alias: { 'react-native': 'react-native-web', // +++ 加入配置 '@': resolve('src') }
npm i antd-mobile -S
npm i babel-plugin-import -D
// package.json 文件 "babel": { "presets": [ "react-app" ], // 加入配置 "plugins": [ // 如果使用了 定制颜色功能 将 "css" => true 同时需要配置 less ["import", { "libraryName": "antd-mobile", "style": "css" }] ] },
https://www.jianshu.com/p/e09b2c57cf20
注: 如未找到配置文件请使用npm run eject弹出配置文件 当前对应版本react 16.2
设置代理
在开发中往往是跨域请求的,配置一下请求代理可以解决这个问题
模块热替换(HMR)
默认情况下在每次修改内容的时候都会刷新页面,有时候我们并不想要这样,比如有一个bug需要重复点击或者重复操作多次才能实现,但是由于我们每次修改都会刷新页面,可能会导致这个bug很难被测试或者实现,这个配置在我看来非常有用,当然这不是必须的,但是可以适当的提高开发效率。在React 的入口文件 src/index.js中,添加一些配置代码。
css局部化
其次有其他css局部化解决方案 比如 styled-components 可参考我另外一篇文章 骚里骚气的styled-components快速入门
支持装饰器写法
比如redux或者mobx可以使用@写法
npm install --save-dev babel-plugin-transform-decorators-legacy
请注意, plugins 的属性非常重要: transform-decorators-legacy 应该放在最前面。 babel 设置有问题?请先查看这个 issue 。
打包后路径问题导致页面空白
// package.json 文件增加配置
注: 如果直接打开index.html后文件正确加载但页面仍然空白,请检查你是否使用的是 BrowserRouter (同vue的history模式)需要后端配置支持,否则请使用HashRouter 即带 #
配置简化路径
当页面嵌套过深时我们会发现在路径通常都要这么写
import xx from './../../../xxx/qqq'
通过配置webpack可以写成import xx from '@/xxx/qqq'
按需引用antd-mobile
npm i antd-mobile -S
npm i babel-plugin-import -D