好吧，筆者是一個(gè)后端開發(fā)。以前是做C/S項(xiàng)目出身，毫無Web前端基礎(chǔ)，為了更好地理解Web開發(fā)，去年開始嘗試使用公司使用的前端框架React來搭建團(tuán)隊(duì)內(nèi)部使用的系統(tǒng)。通過這個(gè)項(xiàng)目的開發(fā)，也讓我更好地理解了前端同事的不容易，更加堅(jiān)定了寫好接口文檔的決心。

最近在把自己做的這個(gè)內(nèi)部系統(tǒng)遷移到公司的統(tǒng)一平臺(tái)的時(shí)候，遇到了一個(gè)小問題，公司要求打包的目錄名必須為dist，而我這個(gè)項(xiàng)目是使用create-react-app搭建的，所以打包的目錄是默認(rèn)的build。

遂開始了查找如何修改打包目錄的資料。隨便在網(wǎng)上一搜，便是如下的解決方案：

使用eject命令暴露配置，然后修改打包地址

使用這個(gè)命令，是不可逆的，執(zhí)行之前，請將代碼備份或提交版本庫

1、使用eject命令暴露配置：

npm run eject

2、修改暴露出的配置文件config/path.js，將appBuild修改為需要輸出的位置。

3、使用npm install命令安裝依賴，然后執(zhí)行npm run build打包

這個(gè)方案當(dāng)然一點(diǎn)毛病都沒有，通過這個(gè)可以認(rèn)識(shí)到，create-react-app在創(chuàng)建React項(xiàng)目的時(shí)候，是隱藏了許多開發(fā)者不需要過多關(guān)心的配置項(xiàng)的，盡量簡化了前端的開發(fā)。而eject命令則可以讓這些配置項(xiàng)暴露出來。

eject的弊端

要注意的是，eject命令是不可逆的（至少官方?jīng)]有提供回退的方法）。使用了這個(gè)命令，你就要接受你的開發(fā)目錄面多了很多的配置文件和腳本。

這還不是最關(guān)鍵的，因?yàn)槲业捻?xiàng)目使用了antd作為UI框架，其使用了react-app-rewired這個(gè)東東，導(dǎo)致我在eject之后執(zhí)行npm run build會(huì)報(bào)錯(cuò)。

react-app-rewired是什么？

作為一個(gè)后端開發(fā)，最大的感觸就是，前端的網(wǎng)上資料有用的太少，因?yàn)楦鞣N框架、技術(shù)更新迭代太快，很多博客上的解決方案都已經(jīng)過時(shí)了。你們看到的我的這篇文章，可能很快也會(huì)過時(shí)，但是我會(huì)把思路教給大家——話說，當(dāng)遇到一個(gè)技術(shù)問題，實(shí)在解決不了怎么辦？當(dāng)然是找官方文檔了。

通過在react-app-rewired的官方文檔，才知道這個(gè)工具的一個(gè)功能是在不eject的情況下，修改配置文件。上文說到的antd也是為了實(shí)現(xiàn)修改配置，才引入的這個(gè)工具。既然它的功能如此，那么用來修改打包地址應(yīng)該也是可行的。

使用react-app-rewired在不eject的情況下修改打包地址

思路雖然有了，但是對于前端基礎(chǔ)薄弱的后臺(tái)開發(fā)來說，還是不知道怎么實(shí)操，在看了幾篇issue之后，Changing the default paths，Change build output path之后，終于找到了方法。

首先當(dāng)然是要引入react-app-rewired了，這里我就不寫方法了，大家參考官方文檔，不會(huì)過時(shí)。

引入之后，會(huì)有一個(gè)config-overrides.js文件，因?yàn)槲乙肓薬ntd，里面已經(jīng)有了些內(nèi)容：

// 此文件是為了ant選擇性引入
const {injectBabelPlugin} = require('react-app-rewired');

module.exports = function override(config, env) {
  // antd選擇性引入
  config = injectBabelPlugin(['import', {libraryName: 'antd', libraryDirectory: 'es', style: 'css'}], config);
  return config;
};

增加如下代碼（去掉我用來標(biāo)記代碼的+號哈）：

// 此文件是為了ant選擇性引入
const {injectBabelPlugin} = require('react-app-rewired');

module.exports = function override(config, env) {
  // antd選擇性引入
  config = injectBabelPlugin(['import', {libraryName: 'antd', libraryDirectory: 'es', style: 'css'}], config);

+  // 修改path目錄
+  const path = require('path');
+  const paths = require('react-scripts/config/paths');
+  paths.appBuild = path.join(path.dirname(paths.appBuild), 'dist');
+  config.output.path = path.join(path.dirname(config.output.path), 'dist');

  return config;
};

如此，再執(zhí)行npm run build就可以了，問題解決。

如果你已經(jīng)進(jìn)行了eject操作，很遺憾，只能通過版本庫回退版本了。

尾聲：配置代碼解析

到了這里，估計(jì)有部分同學(xué)還不滿意為什么以上代碼能夠解決問題，作為一個(gè)外行人，我按我的理解解釋下。

const path = require('path');

這行代碼是基于require.js，是一個(gè)js進(jìn)行引入包的工具。通過這行代碼，拿到path，才能夠?qū)β窂阶鎏幚怼?/p>

const paths = require('react-scripts/config/paths');

react-scripts里面有React項(xiàng)目用于打包的命令，以及配置文件，如果你進(jìn)行了eject，會(huì)發(fā)現(xiàn)config和script目錄里的內(nèi)容與react-scripts里的同名目錄驚人的相似?？梢哉J(rèn)為eject是把這里的配置暴露出來了。這里這行代碼是為了獲取項(xiàng)目的路徑配置。

paths.appBuild = path.join(path.dirname(paths.appBuild), 'dist');

這行代碼是修改配置里的appBuild目錄，React項(xiàng)目在進(jìn)行build的時(shí)候，都是根據(jù)這里配置的目錄做的操作（例如檢查打包后的代碼大小，計(jì)算Gzip等），必須要修改，不然打包會(huì)失敗。

config.output.path = path.join(path.dirname(config.output.path), 'dist');

這行代碼就是實(shí)現(xiàn)我們目的的根源了，修改項(xiàng)目打包地址。

好了，到這里本文結(jié)束。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論