不使用create-react-app：如何設置自己的reactjs樣板

時間：2020-08-02 18:34 來源：互聯網作者：源碼搜藏瀏覽：次收藏挑錯推薦打印

什么是CRA？ Create React App是由Facebook開發人員構建和維護的工具鏈，用于引導React應用程序。您只需運行一個命令，然后Create React App即可設置啟動React項目所需的工具。 CRA的優勢單個命令開始 npx create-react-app my-app 少學習。您可以只關注R

什么是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的項目。