像 create-react-app 一样生成您的 web 应用程序样板。

大家好，这是我在这里的第一篇帖子，我希望我的英语足够流畅，可以让大家享受阅读的乐趣👍。

创建 npm 包并输入以下内容看起来很酷：

npx my-dream-boilerplate app-name

嘭！你的项目神奇地完成了，你最喜欢的配置、工具等等都设置好了。

这就是我们现在要做的。

为什么？

在我们真正开始之前，让我们尝试回答这个问题：

当已经有诸如 create-react-app 之类的优秀工具可以做很多事情，而不仅仅是简单的项目样板时，为什么还要创建自己的 wep-app 样板呢？

以下是我的动机：
当我创建一个 Web 应用程序时，我开始对每次都必须一遍又一遍地安装相同的包、命令、文件夹等感到非常厌烦。

我可以提取一些项目布局。
我主要使用 React.js，每次（或者几乎每次）都需要安装/修改一堆相同的组件（react-router-dom、styled-component、构建组件结构、redux 等等），而我不需要 create-react-app 来制作小型应用或快速原型设计。
我把时间浪费在安装包、添加配置和整理文件夹上。

因此，我对使用npx my-dream-boilerplate app-name命令来生成我喜欢的项目启动器很感兴趣。

初始化项目

为了演示的目的，我们将事情做得非常非常（非常）简单。
我们会像在很多项目中一样：添加一个 package.json 文件并安装所有需要的依赖项。

安装依赖项和设置

首先让我们初始化项目：

创建一个新的文件夹，例如“create-my-boilerplate”并在其中运行：

npm init

我们在这里将使用的唯一依赖项是 parcel 和 rimraf。

Parcel 是一个 Web 应用程序捆绑器，还有其他 Javascript 捆绑器（webpack、rollup 等），但 Parcel 几乎不需要配置，只有一个开发服务器、热模块替换等。所以这足以满足我们的需求。
rimraf 是一个 npm 包，在 Node 中用作 UNIX 命令 rm -rf 的等效命令。我们只会在脚本部分使用它作为命令。

npm install -D parcel-bundler
npm install rimraf

更改 package.json 中的 npm scripts 字段：

  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.js"
  }

创建结构

创建一个 index.html 和一个 index.js 文件。

您的 index.html 如下所示：

<html>
<body>
    <div>Cool</div>
    <script src="index.js"></script>
</body>
</html>

现在验证一切是否正常：

npm start

再次强调，这里的项目结构很荒谬，但如何设置 Web 项目并不是本文的重点。

脚本 + Npx = 速度

脚本

我们现在正在编写 create-app.js 文件。
同样，为了简单起见，脚本必须处理以下代码：

我们想要执行一个接受代表应用程序名称的参数的命令并验证它。
如果有效，请验证项目名称是否尚不存在当前文件夹中。
然后我们要克隆这个项目样板的 github 存储库。
我们要安装所有依赖项。
我们要删除无用的文件。

首先，我们需要所需的软件包：（您不需要安装它们）。

#!/usr/bin/env node

const { execSync } = require('child_process');
const path = require('path');
const fs = require('fs');

我们验证是否提供了应用程序名称（没有参数的 npx create-boilerplate 不是有效命令）：

if (process.argv.length < 3) {
    console.log('You have to provide a name to your app.');
    console.log('For example :');
    console.log('    npx create-my-boilerplate my-app');
    process.exit(1);
}

声明我们需要的变量：

const projectName = process.argv[2];
const currentPath = process.cwd();
const projectPath = path.join(currentPath, projectName);
const git_repo = YOUR_GIT_URL;

验证项目名称是否可用，否则取消该过程：

try {
  fs.mkdirSync(projectPath);
} catch (err) {
  if (err.code === 'EEXIST') {
    console.log(`The file ${projectName} already exist in the current directory, please give it another name.`);
  } else {
    console.log(error);
  }
  process.exit(1);
}

现在我们进入主要部分：

async function main() {
    try {
      console.log('Downloading files...');
      execSync(`git clone --depth 1 ${git_repo} ${projectPath}`);

      process.chdir(projectPath);

      console.log('Installing dependencies...');
      execSync('npm install');

      console.log('Removing useless files);
      execSync('npx rimraf ./.git');
      fs.rmdirSync(path.join(projectPath, 'bin'), { recursive: true});

      console.log('The installation is done, this is ready to use !');

    } catch (error) {
      console.log(error);
    }
}
main();

使用 console.log() 读取命令行，它们几乎解释了每个命令。
这是一个非常基本的 CLI，但借助 Node 环境、添加颜色、package.json 生成器等，你还可以做更多的事情。

就是这样。
你可以在本地测试你的包：

npm link

它创建一个符号链接，以便您可以将其用作当前所在文件夹中的节点模块。

现在正是魔法降临的伟大时刻：

npx create-my-boilerplate app-name

你的脚本运行成功，项目生成成功。
恭喜！
正如你所见，基本的生成过程绝对不复杂。

您可以开始：

npm start

更进一步，用您最喜欢的设置制作自己的样板并学习在 npm 上发布。

npm login

npm publish

现在在https://www.npmjs.com/上检查您的包！

我希望这篇文章不会让您感到困惑，并希望它能对您在 Node.js 脚本编写的可能性、您的项目需求以及/或者新的软件包创意方面有所启发。
我自己上周用 Parcel 为 React-applications 构建了自己的项目样板（事实上，这是我的第一个 npm 软件包），其中包含我经常使用的功能，例如 Prettier、CSS 自动前缀和重置、测试、样式组件等等。
如果您感兴趣，可以查看我 GitHub 上的代码，特别是 ./bin/ 文件夹，那里有比本文更高级的脚本：https://www.npmjs.com/package/react-parcel-app

感谢您的阅读并祝您有美好的一天。

文章来源：https://dev.to/leopold/generate-your-web-app-boilerplate-like-create-react-app-does-301p

像 create-react-app 一样生成您的 web 应用程序样板。

像 create-react-app 一样生成您的 web 应用程序样板。

为什么 ？

初始化项目

安装依赖项和设置

创建结构

脚本 + Npx = 速度

更多设置

脚本

为什么？