create-react-app 太慢并且会创建杂乱的应用程序

Question

我正在学习反应，并没有太多的经验。每当我想创建一个新的 React 项目时，该create-react-app命令都需要花费大量时间来制作。我遵循了CodeSandbox，它可以非常快速地创建React应用程序，它们简单而干净，不像由 create-react-app 制作的那些过于复杂和凌乱。是否有样板可以帮助我快速创建简单的 React 应用程序？

Answer 1

这是最简单的入门方法

npx create-react-app my-app
cd my-app
npm start

下面是一个替代方案，但它涉及更多。

mkdir my-app // create directory
cd my-app
npm init -y //create package.json
npm install react react-dom //install react and react-dom
touch index.js index.css

您可以将代码添加到 index.js。它看起来像这样

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class App extends React.Component{
    render(){
        return(
            <div>Hello World</div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'))

之后你需要得到你的 babel

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin

touch webpack.config.js

配置你的 webpack

var path = require('path');
var HtmlWebpackPlugin =  require('html-webpack-plugin');

module.exports = {
    entry : './my-app/index.js',
    output : {
        path : path.resolve(__dirname , 'dist'),
        filename: 'index_bundle.js'
    },
    module : {
        rules : [
            {test : /\.(js)$/, use:'babel-loader'},
            {test : /\.css$/, use:['style-loader', 'css-loader']}
        ]
    },
    mode:'development',
    plugins : [
        new HtmlWebpackPlugin ({
            template : 'my-app/index.html'
        })
    ]

}

添加 babel 预设和 npm 命令来构建（build）和运行（dev）你的代码到 package.json

   "main": "index.js",
        "babel":{
            "presets" : [
              "@babel/preset-env",
              "@babel/preset-react"
            ]
          }"scripts": {
        "build": "webpack",
    "dev": "webpack-dev-server --open"
   }

Answer 2

最好、最有效的方法是首先安装pnpm软件包。由于其中实现了符号链接和缓存，它比普通命令npm install或命令要快得多。npm i

最好有一个 git 发起的仓库create-react-app，你可以把常用的包安装在package.json文件里。然后，每次您想要创建新项目时，您都可以通过运行以下命令来克隆存储库并快速安装软件包。它可能需要与以前相同的时间，因为pnpm需要缓存包并重新使用它们。

pnpm i

我已经创建了一个示例存储库，您可以从此链接克隆它。

PS 1：您可以pnpm在此链接中阅读更多相关内容。