## 一、通過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文件