当前位置:首页 > 安卓源码 > 技术博客 >

不使用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-crareact-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 startnpm 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.jsonwebpack.config.jsgitignoresrc/并安装里面的依赖关系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样板 转载https://www.codesocang.com/appboke/46142.html

技术博客阅读排行

最新文章