前言
generator-new是一个可以简化前端项目初始化的npm包。使用它可以快速搭建一个基础的前端项目架构，让我们可以专注于业务代码的编写，减少不必要的重复劳动。下面将详细介绍如何使用此npm包。
安装
首先，需要全局安装generator-new：
npm install -g generator-new
安装完成后，就可以在命令行中使用yo new命令了。
使用
初始化项目
使用以下命令初始化一个新的项目：
yo new my-project
其中，my-project是你的项目名称，可以根据需要进行修改。
在运行yo new my-project命令后，会出现以下提示：
? Would you like to include jQuery in your project? (Y/n)
这里会询问你是否需要在项目中包含jQuery，默认是Y，按回车即可。
然后会继续询问选择使用哪一个模板：
? Which one would you prefer? (Use arrow keys) ❯ WP (WordPress theme) React (React application) Vue (Vue.js application)
这里以React为例，选择后按回车即可。
运行命令后，generator-new将自动创建一个新的文件夹my-project，其中包含了一个基本的React应用程序的骨架代码。项目的目录结构如下：
-- -------------------- ---- ------- ---------- --- ------ - --- ----------- - --- ---------- - --- ------------- --- --- - --- ------- - --- ------ - --- ----------- - --- --------- - --- -------- - --- -------- - --- ---------------- --- ------------ --- ---------
定制化项目
除了选择使用内置的模板，也可以自定义自己的项目骨架，这里以React为例举例说明。
添加组件
在src目录中，可以创建自己的组件：
cd my-project/src/ mkdir components cd components/ touch HelloWorld.js
在HelloWorld.js中添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------ -
------ -
-----
---------- -----------
------
--
-
------ ------- -----------然后，在src/App.js中引入该组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------
------ ---------- ---- --------------------------
-------- ----- -
------ -
---- ----------------
----------- --
------
--
-
------ ------- ----这样，在浏览器中打开http://localhost:3000/后，就可以看到Hello, world!这个组件了。
修改样式
在src目录中，可以创建自己的样式文件：
cd my-project/src/ touch styles.css
在styles.css中添加以下代码：
.hello {
font-size: 36px;
color: #333333;
}在HelloWorld.js中引入该样式文件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------
-------- ------------ -
------ -
---- ------------------
---------- -----------
------
--
-
------ ------- -----------这样，在浏览器中打开http://localhost:3000/后，HelloWorld组件中的文字就会变成36号字体、黑色。
打包项目
在开发、调试完成后，需要将项目打包成可部署的静态资源文件。
使用以下命令打包项目：
npm run build
打包完成后，build文件夹中就包含了打包后的静态资源文件。
总结
使用generator-new可以帮助我们快速搭建前端项目架构，简化项目初始化过程。同时，我们也可以根据自己的需求定制化项目骨架，以满足业务需求。希望这篇文章能够帮助您快速上手使用generator-new。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005622181e8991b448df7dc