create react app原始碼解讀

複製**

複製**

在實現**之前我們先梳理一上思路：

通過commander獲取專案名稱;

如果專案名稱為空（實際上還要對包名進行有效性檢查的，這裡暫且忽略），則退出程序，並提示使用者專案名稱不能為空，否則進行步驟3;

在當前目錄下建立乙個子目錄，目錄名稱就是使用者輸入的專案名，並在裡面初始化乙個package.json檔案;

進入專案的根目錄，安裝react,react-dom和react-scripts三個依賴;

依賴安裝完成後，呼叫react-scripts的init方法初始化專案（主要是複製模板）;

結束; 按照上面的思路，開始編碼吧！

先引入一些必要的依賴，對於這些依賴有什麼作用這裡就不展開了。 以及定義乙個用來存放專案名稱的變數projectname：

const commander = require('commander');

const chalk = require('chalk');
const spawn = require('cross-spawn'); 
const fs = require('fs-extra');
const path = require('path');
const os = require('os');
const packagejson = require('./package.json');
let projectname; // 專案名稱，通過命令列引數獲取
複製**

const program = new commander.command(packagejson.name)

.version(packagejson.version)
.arguments('')
.usage(`$ [options]`)
.action(name => )
.parse(process.ar**) // 格式化引數，必須要的
// 如果沒有輸入專案名稱，則給出提示，並退出程序
if(typeof projectname === 'undefined') 
console.log();
process.exit(1);
}複製**

// 開始建立專案

const root = path.resolve(name);
fs.ensuredirsync(root); // 建立專案空目錄
$.`);
// 建立新專案的package.json
const packagejson = ;
fs.writefilesync(path.join(root, 'package.json'), json.stringify(packagejson, null, 2) + os.eol);
// 將當前目錄的路徑存下來。因為下一步我們就要進入到新專案的目錄了
// 後面可能還會用到當前的路徑
const originaldirectory = process.cwd();
// 進入新建立的專案裡面
process.chdir(root);
run(root, originaldirectory);
}複製**

function run(root, originaldirectory) , $, and $...`);

console.log();
install(root, alldependencies)
.then(() => )
.catch(reason =>  has failed.`);
} else 
})}// 在指定目錄下安裝npm依賴
function install(root, dependencies) );
child.on('close', code => 
$`        });
return;
}resolve();
})});
}複製**

create react app學習筆記

開始 cd aa npm start1，檔案結構 2，可用的指令碼命令 支援最新的js語法和墊層。這個專案支援es6，es7，es8等 3，新增 4，使用public目錄 5，使用全域性變數 6，新增bootstrap 7,新增flow 8,新增環境變數 這些環境變數在構建的過程中會自動替換成想要的...

create react app中新增less支援

npm run eject執行之後，我們發現多了乙個config資料夾 這樣就可以修改 webpack 相關配置了。在專案根目錄 使用 npm 或者 yarn 來安裝 less 和 less loader,我這裡使用的是 yarn yarn add less less loader我們需求修改 we...

dva與create react app的結合使用

接著把腳手架生成的src全部刪掉 用我們自己的專案目錄進行開發 首先 建立乙個index.js資料夾 作為我們專案的主入口 1 import dva from dva 34 注意這種引入方式已經報銷 在控制台會報警告5 import createhistory from history create...