## 一、通过create-react-app创建的项目，怎么显示webpack配置？ 首先打开package.json可以看到以react-script的字样，然后输入以下命令 ~~~ npm run eject ~~~ 就会生成webpack的相关配置，如果项目在git仓库下，需要把编辑器生成的文件/文件夹和不需要提交的文件/文件夹添到git上，提交推送后才能执行该命令，.gitignore示例如下 .gitignore ~~~ /.idea /journal/node_modules ~~~ ## 二、使用淘宝镜像 ~~~ npm install -g cnpm --registry=https://registry.npm.taobao.org ~~~ ## 三、修改端口号 在scripts/start.js中，找到这一行修改 ~~~ const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 4600; ~~~ 把4600改成你想要的，如3000 ## 四、npm run all后禁止在浏览器自动打开 在scripts/start.js中，找到这一行注释 ~~~ // openBrowser(urls.localUrlForBrowser); ~~~ ## 五、hashHistroy下build之后路径配置，让其可以直接访问 config->paths.js ~~~ function ensureSlash(path, needsSlash) { const hasSlash = path.endsWith('/'); if (hasSlash && !needsSlash) { return path.substr(path, path.length - 1); } else if (!hasSlash && needsSlash) { return `/${path}/`; } else { // return path; return `.${path}`; // 改成相对路径 } } ~~~ ## 六、引入静态资源 create-react-app创建的项目，入口文件public/index.html 引入静态资源 ~~~ <link rel="stylesheet" href="%PUBLIC_URL%/leafleft/leaflet.css"> <script src="%PUBLIC_URL%/leafleft/leafleft.js" type="application/javascript"></script> ~~~ ## 七、如何在browserHistory模式下，build后，在web服务器上打开？ 1)、express下，在app.js里加下面一句 ~~~ app.use(express.static(path.join(__dirname, 'build'))); ~~~ 图示  2)、xampp（apache）下 首先build放到根目录下（D:\xampp\htdocs\build）  .htaccess 重写规则 ~~~ <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> ~~~ 或 ~~~ <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ index.html [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . index.html [L] </IfModule> ~~~ 然后配置个虚拟主机 D:\xampp\apache\conf\httpd.conf 去除#号，启用虚拟主机配置 ~~~ Include conf/extra/httpd-vhosts.conf ~~~ D:\xampp\apache\conf\extra\httpd-vhosts.conf 添加虚拟主机 ~~~ ## build <VirtualHost www.build.com:8080> ServerName www.build.com DocumentRoot D:\xampp\htdocs\build <Directory D:\xampp\htdocs\build > AllowOverride all Order Allow,Deny Allow from all </Directory> </VirtualHost> ~~~ C:\Windows\System32\drivers\etc\HOSTS 添加host配置 ~~~ # build 127.0.0.1 www.build.com ~~~ 最后就可以重启apache服务访问了，http://www.build.com:8080/  如果不使用虚拟主机，则需要把重写规则和path改下，这样比较麻烦~ ## 八、全局模块通过script引入，再通过webpack导入 config/webpack.config.dev.js配置 ~~~ output: { // ... }, externals: { AMap: "AMap" }, ~~~ public/index.html引用 ~~~ <script src="https://webapi.amap.com/maps?v=1.3&key=b705b0ffe322148bbf5c1febdf47fe95&plugin=AMap.Geocoder"></script> ~~~ 通过import使用 ~~~ import AMap from 'AMap'; ~~~ ## 九、build时去掉.map文件 config/webpack.config.prod.js ~~~ // const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; const shouldUseSourceMap = false; ~~~ ## 十、在build时，static前加test目录 config/path.js ~~~ function getServedPath(appPackageJson) { const publicUrl = getPublicUrl(appPackageJson); const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/test/'); return ensureSlash(servedUrl, true); } ~~~ ## 十一、添加proxy **方式1** scripts/start.js 修改完成后重启服务 ~~~ let proxyConfig = prepareProxy(proxySetting, paths.appPublic); if(!proxyConfig){ proxyConfig = { "/api/*":{ target:"http://xxx.com/api", changeOrigin:true, secure:false } } } ~~~ 使用 ~~~ axios.get('/test/list.php').then(({data})=>{ // console.log(data); let state = { data: data }; this.setState(_.defaultsDeep(state, this.state)); }); ~~~ **方式2** 在package.json里以对象的方式添加proxy ``` "proxy": { "/api": { "target": "http://xxx.com/abc", "changeOrigin": true, "pathRewrite": { "^/api": "" } } } ``` **方式3** 在package.json里以字符串的方式添加proxy ``` "proxy": "http://xxx.com/abc" ``` 注意：方式2和方式3根据报错来使用 **方式4** 使用http-proxy-middleware中间件 ``` $ cnpm i http-proxy-middleware -D ``` 在src目录下新建setupProxy.js，这个文件会被自动识别，内容如下 ``` const proxy = require('http-proxy-middleware') module.exports = function(app) { app.use(proxy('/vip_service', { target: 'http://www.xxx.com/vip', changeOrigin: true, // pathRewrite: { // '/vip_service': '/vip_service' // } })); }; ``` 如果axios无法传递参数，那么修改下transformRequest配置试试 ``` axios.defaults.transformRequest = [ function (params) { let searchArr = []; for (let k in params) { if(typeof k === 'string') { searchArr.push(encodeURIComponent(k) + '=' + encodeURIComponent(params[k])); } else { searchArr.push(encodeURIComponent(k) + '=' + encodeURIComponent(JSON.stringify(params[k]))); } } return searchArr.join('&'); } ]; ``` ## 十二、build打包优化 1、可以把大文件，如react, react-dom通过script引入 2、关闭inline-source-map；生产环境使用devtool: false 3、把不需要在生产环境使用的文件过滤掉 13、调试可以下载 **React Developer** Tools https://github.com/facebook/react-devtools 然后在webpack.config.js中加上 devtool: 'source-map' 这个配置 ~~~ entry:{ 'index':'./src/index.js', 'comment':'./src/comment.js', 'commentEs6':'./src/commentEs6.js', }, devtool: 'source-map', output: { path: path.resolve(__dirname, 'build'), filename: '[name].js' } ~~~ ## 十三、setState setState 是批处理的，有时setState了，但并没有改变或不是你想要的结果，也不要钻牛角尖，这里可以迂回解决。 1、在回调里处理 ~~~ setState({params: { io: 'in' }}, function() { console.log(this.state.params); // ... }); ~~~ 2、使用shouldComponentUpdate: 判断组件是否应该重新渲染，默认是true ~~~ shouldComponentUpdate(nextProps, nextState) { // ... if(this.state.name !== nextState.name) { return true; } return false; } ~~~ 3、setState仅适合1级设置，多级的需要先合并再设置 ~~~ this.state = { loading: false, isReqComplete: false, data: { avg: '', flight_list: [], times: {} }, params: { in_or_out: 'in', tab: 'Sector_4N' } }; // 直接设置一级的 this.setState({ loading: true, isReqComplete: false, data: { avg: '', flight_list: [], times: {} } } // 多级合并 let params = { in_or_out: 'in' }; this.setState({ params: defaultsDeep(params, this.state.params) }); ~~~ ## 十四、create-react-app创建项目失败 可能是因为npm-cache的问题（缓存文件与下载文件有冲突），把缓存（C:\Users\win10\AppData\Roaming\npm-cache）清除，再执行命令应该就可以了 ## 十五、遇到莫名的报模块未引入错误，就删除node_modules重装 ## 十六、如果npx create-react-app创建项目，报类似以下错误 > The engine "node" is incompatible with this module. Expected version "=> ^4.0.0". > error Found incompatible module create-react-app版本：2.0.4 解决方案： 1、改下node版本，。该升级就升级，该下载指定的就下载指定的（安装目录覆盖原目录就行了） 2、如果报yarn错误就安装下，npm install yarn -g 3、可以尝试：yarn install --ignore-engines ## 十七、配置路径别名，避免使用../../之类的路径 webpack.config.dev.js ``` resolve: { alias: { '@': path.resolve('./src') } } ``` ## 十八、报错：Inline JavaScript is not enabled. Is it set in your options? 解决：在less-loader配置下添加参数：javascriptEnabled: true ``` { loader: 'less-loader', options:{ javascriptEnabled: true, modifyVars: theme() } } ``` ## 十九、如果引入less报错： Import in body of module; reorder to top import/first 解决：在引入组件前先引入less文件