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

Question

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

Answer 1

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

最好有一个由 启动的git仓库create-react-app，你可以在package.json文件中安装你常用的包。然后每次要创建新项目时，都可以通过运行以下命令克隆存储库并快速安装包。可能需要和以前一样的时间，因为pnpm需要缓存包并重新使用它们。

pnpm i

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

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

Answer 2

这是最简单的入门方法

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"

   }