什么是CRA？
Create React App是由Facebook開發人員構建和維護的工具鏈，用于引導React應用程序。您只需運行一個命令，然后Create React App即可設置啟動React項目所需的工具。
CRA的優勢
- 單個命令開始
npx create-react-app my-app
- 少學習。您可以只關注React，而不必擔心webpack，babel和其他此類構建依賴項。
-
只有一個構建依賴項
react-scripts。這樣可以維護您所有的構建依賴關系，因此只需一個命令即可輕松維護和升級。
npm install react-scripts@latest
CRA的缺點
- 難以添加自定義構建配置。添加自定義配置的一種方法是彈出應用程序，但隨后它會覆蓋“ 僅一個構建依賴項”優勢。另一種方法是您可以使用諸如custom-cra或react-app-rewired之類的程序包，但是它們的功能有限。
-
提取一切。了解運行React應用程序所需的內容非常重要。但是由于它只有一個構建依賴項優勢，所以初學者可能會認為這
react-scripts是運行react應用程序所需的唯一依賴項，并且可能不知道transpiler（babel），bundler（webpack）是關鍵的依賴項，這些依賴項在幕后使用react-scripts。在我讀到這篇很棒的文章之前，這一直發生在我身上。 -
CRA腫-IMO。例如，CRA附帶了SASS支持，如果您正在使用，
plain CSS或者Less它是您永遠不會使用的額外依賴項。這是彈出的CRA應用程序的package.json。
CRA的替代方法是設置您自己的樣板。我們可以從CRA中獲得的唯一好處是使用單個命令入門，并且可以通過自己設置依賴項和配置來消除其所有缺點。我們不能利用其他兩個優點，因為它引入了兩個缺點（將所有內容摘要化，并且很難添加自定義構建配置）。
此倉庫具有此博客文章中使用的所有代碼。
首先，使用npm和git初始化您的項目
npm init
git init
讓我們快速創建一個.gitignore文件以忽略以下文件夾
node_modules
build
現在，讓我們看看運行React應用程序需要哪些基本依賴關系。
反應和反應
這些是您僅需要的兩個運行時依賴項。
npm install react react-dom --save
Transpiler（通天塔）
Transpiler在當前和較舊的瀏覽器中將ECMAScript 2015+代碼轉換為JavaScript的向后兼容版本。我們還使用它通過添加預設來轉換JSX。
npm install @babel/core @babel/preset-env @babel/preset-react --save-dev
React應用程序的簡單babel配置如下所示。您可以將此配置添加到.babelrc文件中，也可以將其添加為package.json中的屬性。
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
捆綁器（Webpack）
Bundler將您的代碼及其所有依賴項捆綁在一個捆綁文件中（如果使用代碼拆分，則捆綁在一起）。
npm install webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin --save-dev
一個用于React應用程序的簡單webpack.config.js看起來像這樣。
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
resolve: {
modules: [path.join(__dirname, 'src'), 'node_modules'],
alias: {
react: path.join(__dirname, 'node_modules', 'react'),
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
}),
],
};
您可以根據需要添加各種裝載機。查看我關于Webpack優化的博客文章，其中我討論了可以添加的各種Webpack配置，以使您的React App可以投入生產。
這就是我們需要的所有依賴關系。現在，我們添加一個HTML模板文件和一個react組件。
讓我們創建src文件夾并添加index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Boilerplate</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
讓我們在src文件夾中創建一個HelloWorld.js react組件
import React from 'react';
const HelloWorld = () => {
return (
<h3>Hello World</h3>
);
};
export default HelloWorld;
讓我們將index.js文件添加到src文件夾中
import React from 'react';
import { render } from 'react-dom';
import HelloWorld from './HelloWorld';
render(<HelloWorld />, document.getElementById('root'));
最后，讓我們在package.json中添加開始和構建腳本
"scripts": {
"start": "webpack-dev-server --mode=development --open --hot",
"build": "webpack --mode=production"
}
這就對了。現在，我們的react應用已準備就緒可以運行。嘗試命令npm start和npm run build。
現在，讓我們利用CRA 的單個命令優勢實現入門。基本上，我們將使用當在命令行中鍵入特定命令（您的樣板名稱）時運行的可執行JS文件。例如。reactjs-boilerplate new-project為此，我們將在package.json中使用bin屬性。
首先創建可執行的JS文件。安裝fs-extra
npm i fs-extra
bin/start.js使用以下內容在項目根目錄上創建文件。
#!/usr/bin/env node
const fs = require("fs-extra");
const path = require("path");
const https = require("https");
const { exec } = require("child_process");
const packageJson = require("../package.json");
const scripts = `"start": "webpack-dev-server --mode=development --open --hot",
"build": "webpack --mode=production"`;
const babel = `"babel": ${JSON.stringify(packageJson.babel)}`;
const getDeps = (deps) =>
Object.entries(deps)
.map((dep) => `${dep[0]}@${dep[1]}`)
.toString()
.replace(/,/g, " ")
.replace(/^/g, "")
// exclude the dependency only used in this file, nor relevant to the boilerplate
.replace(/fs-extra[^\s]+/g, "");
console.log("Initializing project..");
// create folder and initialize npm
exec(
`mkdir ${process.argv[2]} && cd ${process.argv[2]} && npm init -f`,
(initErr, initStdout, initStderr) => {
if (initErr) {
console.error(`Everything was fine, then it wasn't:
${initErr}`);
return;
}
const packageJSON = `${process.argv[2]}/package.json`;
// replace the default scripts
fs.readFile(packageJSON, (err, file) => {
if (err) throw err;
const data = file
.toString()
.replace(
'"test": "echo \\"Error: no test specified\\" && exit 1"',
scripts
)
.replace('"keywords": []', babel);
fs.writeFile(packageJSON, data, (err2) => err2 || true);
});
const filesToCopy = ["webpack.config.js"];
for (let i = 0; i < filesToCopy.length; i += 1) {
fs.createReadStream(path.join(__dirname, `../${filesToCopy[i]}`)).pipe(
fs.createWriteStream(`${process.argv[2]}/${filesToCopy[i]}`)
);
}
// npm will remove the .gitignore file when the package is installed, therefore it cannot be copied, locally and needs to be downloaded. Use your raw .gitignore once you pushed your code to GitHub.
https.get(
"https://raw.githubusercontent.com/Nikhil-Kumaran/reactjs-boilerplate/master/.gitignore",
(res) => {
res.setEncoding("utf8");
let body = "";
res.on("data", (data) => {
body += data;
});
res.on("end", () => {
fs.writeFile(
`${process.argv[2]}/.gitignore`,
body,
{ encoding: "utf-8" },
(err) => {
if (err) throw err;
}
);
});
}
);
console.log("npm init -- done\n");
// installing dependencies
console.log("Installing deps -- it might take a few minutes..");
const devDeps = getDeps(packageJson.devDependencies);
const deps = getDeps(packageJson.dependencies);
exec(
`cd ${process.argv[2]} && git init && node -v && npm -v && npm i -D ${devDeps} && npm i -S ${deps}`,
(npmErr, npmStdout, npmStderr) => {
if (npmErr) {
console.error(`Some error while installing dependencies
${npmErr}`);
return;
}
console.log(npmStdout);
console.log("Dependencies installed");
console.log("Copying additional files..");
// copy additional source files
fs.copy(path.join(__dirname, "../src"), `${process.argv[2]}/src`)
.then(() =>
console.log(
`All done!\n\nYour project is now ready\n\nUse the below command to run the app.\n\ncd ${process.argv[2]}\nnpm start`
)
)
.catch((err) => console.error(err));
}
);
}
);
現在，使用命令映射可執行的JS文件。將此粘貼到package.json中
"bin": {
"your-boilerplate-name": "./bin/start.js"
}
現在，讓我們通過運行本地鏈接包（樣板）
npm link
現在，當此命令在終端（命令提示符）被輸入，your-boilerplate-name my-app我們的start.js可執行文件被調用，它創建了一個名為新文件夾my-app，復制package.json，webpack.config.js，gitignore，src/并安裝里面的依賴關系my-app的項目。
太好了，現在可以在您當地使用。您只需一個命令即可引導React項目（使用您自己的構建配置）。
您還可以更進一步，將樣板發布到npm Registry。首先，提交代碼并將其推送到GitHub，然后按照以下說明進行操作。
歡呼！我們在幾分鐘之內創建了create-react-app的替代方案，這不會腫（您可以根據需要添加依賴項），并且更容易添加/修改構建配置。
當然，我們的設置非常少，當然還沒有準備好進行生產。您必須添加更多Webpack配置以優化構建。
我已經創建了一個帶有生產就緒構建的reactjs-boilerplate，其中包含了linter和pre-commit鉤子。試試看。歡迎提出建議和意見。
回顧
- 我們看到了CRA的優缺點。
- 我們決定 從CRA 的單一命令優勢入手，并在我們的項目中實施它，并消除其所有弊端。
- 我們添加了運行React應用程序所需的最少Webpack和babel配置
- 我們創建了一個HelloWorld.js react組件，使用開發服務器運行它并進行構建。
- 我們創建了一個可執行的JS文件，并通過package.json中的bin屬性使用命令名稱將其映射。
-
我們過去
npm link鏈接了樣板，并制作了樣板以通過單個命令引導新的React項目。
就是這樣，伙計們，感謝您閱讀本博客文章。希望它對您有用。
不使用create-react-app：如何設置自己的reactjs樣板 轉載http://www.hxslwl.com/appboke/46142.html技術博客閱讀排行
-
2016-09-10
-
快速集成MQTT協議到Android客戶端,只需要簡單的幾個步驟,無需關
2016-09-22
-
2017-01-05
-
2017-01-05
-
-
2017-02-22
-
安卓開發筆記——TabHost組件(一)（實現底部菜單導航）
2016-09-26
-
最新文章
-
React Native 啟動速度優化——JS 篇【全網最全，值得收藏】
2021-04-19
-
2021-01-24
-
2020-12-20
-
2020-12-19
-
2020-09-14
-
使用C ++ 11線程支持庫創建帶有事件循環，消息隊列和計時器的輔助線程
2020-09-14
-
2020-08-29
-
2020-08-09
熱門源碼
