在前端开发中，使用现代的技术栈已经成为了一种趋势。这些技术包括TypeScript、React、Webpack等等。而为了更加方便地启动项目，我们可以使用 generator-typescript-modern-webapp 这个npm包。
什么是generator-typescript-modern-webapp
generator-typescript-modern-webapp 是一个基于Yeoman的npm包，它提供了一个用于生成符合现代化前端架构需求的 TypeScript Web App 的 generator，无需手动配置，可帮助开发者更快地启动一个 TypeScript + React + Webpack 的项目。
它包含的主要特性有：
- eslint作为代码风格检查工具
- prettier用于代码格式化
- webpack-dev-server用于快速的本地调试
- 使用webpack构建生产代码并分离代码块
- babel和webpack支持最新的ES标准语法
- 使用Yarn作为默认包管理器
如何使用generator-typescript-modern-webapp
首先，你需要全局安装 yo 这个工具。它是 yeoman 的 cli，可以用于运行已经安装的 generator。
npm install -g yo
然后，我们可以在一个新建项目的目录中运行以下命令：
npm install -g generator-typescript-modern-webapp yo typescript-modern-webapp
执行完毕后，我们输入以下命令：
yarn start
这时就可以看到一个默认的页面，接下来可以根据需求进行开发了。
如果想要打包成生产环境的代码，可以使用以下命令：
yarn run build
这样我们就能在 dist 目录中看到我们的生产代码和资源了。
如何更改 generator-typescript-modern-webapp 的默认配置
我们可以通过修改 typescript-modern-webapp 中的一些变量来改变它的默认配置。在修改配置之前，可以先查看一下 typescript-modern-webapp 生成的默认配置文件，比如eslint、tsconfig.json等，了解一下这些配置项是干什么的以及在某些场景下需要修改的地方。默认的配置文件可以在下载下来的项目中找到。
一些比较常见的配置项有：
port：指定本地开发服务器的端口号。useRedux：是否使用redux。useMaterialUI：是否使用material-ui。useCypress：是否使用cypress作为E2E测试工具。
例如，要更改端口号，可以按照以下步骤进行：
- 打开
package.json文件，找到config对象。 - 在
config对象下添加一个port属性，设置它的值为你想要的端口号。
"config": {
"port": 8080
}- 重新启动本地开发服务器。
yarn start
这时使用的端口号就变成了 8080。
结论
generator-typescript-modern-webapp 使我们可以快速启动一个现代化前端架构的项目，并且基于Yeoman，可以方便地自定义配置。我们只需要按照文档中的步骤进行操作，就可以轻松地做到快速启动项目。希望这篇文章能够帮助读者快速掌握 generator-typescript-modern-webapp 的使用方法。
示例代码
在这里，提供一个简单的代码示例：
-- -------------------- ---- -------
------ ----- ---- --------
--------- ------ -
------ -------
-
----- ---- ------------------------------- - -- ----- -- -- -
------ -
-----
----------------
---------- -- -- --------
------
--
--
------ ------- ----这是一个简单的组件代码，通过TypeScript进行类型校验。同时，在下面我们还可以看到生产环境中生成的代码块，如下：
-- -------------------- ---- -------
----------- -
---
-- ------- ----- -------- --
-- ----------------------- -
-------
-
--- - - -----
---- - ----------- -- -- -
--- - - -----
------ -
-------- -- ------ - --
---- --- - -- --- --- -- --
--- - ---- ---
-- - ---
--- --- ----------- --
--- - -------------- ---- --- ---- -- -- - ----
-- - ------------ -- -
-- --- -- -- -- - --- -- ------ -----
--- --
--
--
- - -------------
- - -------------
--- -- - -- - - --------- ----
-- ----- --- ---- -- --- --- ----- -
-- --- - ----- --- ----- -
-- -- --- --------- ------ -----
--------
-
- ---- -------------
------ -- -
--- --- -----------
- --- -
------------------------- - --------- - --- -------------
- ------------ -- ----
---- - --- - -- ----
---- - -
- -- -
- -
----- --- ----------- --
--- --- ----------- --
---- --- -----------
- --
- ---- -
--------------
- ----
--
--
---
-----以上生产环境代码是经过压缩和混淆的，对于前端进行压缩和混淆是十分必要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005666681e8991b448e284f