<h1 id="基本使用">基本使用</h1>
<h2 id="全局安装">全局安装</h2>
<pre><code>npm install @obstinate/react-cli -g
</code></pre>
<p>该脚手架提供的的全局指令为 <code>crazy</code>,查看该脚手架帮助,你可以直接使用:</p>
<pre><code class="language-bs">crazy
</code></pre>
<p>输入该命令后,输出的是整个脚手架的命令帮助,如下图所示:</p>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3950f1460b9b4ed2a6d1d4402e396667~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p>
<h2 id="创建项目">创建项目</h2>
<p>要想创建项目,你可以执行以下命令来根据你想要的项目:</p>
<pre><code class="language-javascript">crazy create &lt;projectName&gt; [options]
</code></pre>
<p>例如创建一个名为 <code>moment</code>,如果当前终端所在的目录下存在同名文件时直接覆盖,你可以执行以下命令:</p>
<pre><code class="language-javascript">crazy create moment -f
</code></pre>
<p>如果你不想安装该脚手架,你也可以使用 <code>npx</code> 执行,使用 <code>npx @obstinate/react-cli</code> 代替 <code>crazy</code> 命令,例如,你要创建一个项目,你可以执行以下命令:</p>
<pre><code class="language-javascript">npx @obstinate/react-cli create moment -f
</code></pre>
<p>如果没有输入 <code>-f</code>,则会在后面的交互信息询问是否覆盖当前已存在的文件夹。</p>
<p>之后便有以下交互信息,你可以根据这些交互选择你想要的模板:</p>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d094c0b458ca4c38ac4e2939796fe647~tplv-k3u1fbpfcp-watermark.image?" alt="动画.gif"></p>
<p>最终生成的文件如下图所示:</p>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f413a5f5950d4c5d8be5e0d9fb87bb01~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p>
<p>当项目安装完成之后你就可以根据控制台的指示去启动你的项目了。</p>
<h2 id="创建文件">创建文件</h2>
<p>通过该脚手架你可以快速创建不同类型的文件,你可以指定创建文件的指定路径,否则则使用默认路径。</p>
<p>要想成创建创建文件,请执行以下指令:</p>
<pre><code class="language-javascript">crazy mkdir &lt;type&gt; [router]
</code></pre>
<p>其中 <code>type</code> 为必选命令,为你要创建的文件类型,现在可供选择的有 <code>axios、component、page、redux、axios</code>,<code>router</code> 为可选属性,为创建文件的路径。</p>
<p>具体操作请看下列动图:</p>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c9ace1c86f6c4cdbb8b03c8158e49aa0~tplv-k3u1fbpfcp-watermark.image?" alt="动画.gif"></p>
<blockquote>
<p>输入不同的类型会有不同的默认路径,并且无需你输入文件的后缀名,会根据你的项目生成相对应的文件后缀名,其中最特别的是创建 redux 文件会自动全局导入 reduxer,无需你自己手动导入,方便了日常的开发效率。</p>
</blockquote>
<h2 id="灵活配置">灵活配置</h2>
<p>与 <code>create-react-app</code> 不同的是,该脚手架提供了自定义 <code>Webpack</code> 和 <code>babel</code> 配置,并通过 <code>webpack-merge</code> 对其进行合并,美中不足的是暂时并还没有提供 <code>env</code> 环境变量,要区分环境你可以在你通过脚手架下来的项目的 <code>webpack.config.js</code> 文件中这样操作:</p>
<pre><code class="language-javascript">// 开发环境
const isDevelopment = process.argv.slice(2)[0] === &quot;serve&quot;;
module.exports = {
  // ...
};
</code></pre>
<blockquote>
<p>最后一个小提示,如果全局安装失败,检查是否权限不够,可以通过管理员身份打开 cmd 即可解决。
这些就是目前仅有的功能,其他的功能正在逐渐开发中......</p>
</blockquote>


基于pnpm+monorepo+webpack开发的前端脚手架,旨在为用户快速初始化项目

react-cli：基于pnpm+monorepo+webpack开发的前端脚手架,旨在为用户快速初始化项目