在前端开发中，我们常常需要快速搭建一个可用的基础模板来进行开发，这时候一个好的 seed 项目就派上用场了。这里介绍了一个功能强大的 seed 项目：@hyper-jobs/seed。
简介
@hyper-jobs/seed 是一个基于 Webpack5，Rollup 和 Babel 的 seed 项目。其核心设计理念是为所有前端项目提供一种通用方法，它包含了许多实用的 features 和配置项，操作简便，传统而又显得没那么枯燥。
安装
你可以通过 npm 安装 @hyper-jobs/seed：
npm install @hyper-jobs/seed
使用方法
@hyper-jobs/seed 可以直接创建一个新的项目骨架，也可以在现有项目中使用。
先安装 seed 工具：
npm install -g @hyper-jobs/seed-cli
新建项目
seed init my-project
执行该命令后，my-project 文件夹将被创建并初始化。
引入 seed
新建项目后，在项目根目录下运行：
npm install @hyper-jobs/seed --save-dev
然后在 package.json 文件加入以下代码：
-- -------------------- ---- ------- - ---------- - -------- -------- ----- -------- -------- ---------- ------------------- ------- ------------ -------- ---- --- ------- ------- ------ -- ------- - -------- ----------------- --------- - ------ --------- ----------- ------------ ---------- ----------- -- -------- - ---------- ---------------------- ---------- -- -- ---------- --- --------- -- -- ------------------ - -------------- ---------- -------------------- ---------- ------------------- --------- ---------------------------- ---------- ------------------------- ---------- ------------------------------ ----------- ------------- ---------- ------------ --------- ------- ---------- ---------- --------- -------------- --------- --------------------- --------- - -展开代码
配置 seed
在 package.json 中的 seed 字段中，可以对 @hyper-jobs/seed 进行配置。
这里除了预设的配置项外，还可以指定某一配置为生产环境或开发环境下的配置。例如，在 seed.webpack 中可以指定生产环境和开发环境下的的不同配置：
-- -------------------- ---- ------- - ------- - -------- ----------------- --------- - ------ --------- ----------- ------------ ---------- ----------- -- --- ---------- - ------------- - ------- ------------ -- -------------- - ------- ------------- - -- --- - -展开代码
运行
在项目根目录下，执行以下命令：
npm start打开浏览器访问 http://localhost:8080/ 即可看到效果。
总结
通过使用 @hyper-jobs/seed 可以轻松地构建一个通用的前端项目骨架，提高开发效率，减少配置时间。同时，硬性的约束能够提高代码质量和可读性。该 seed 项目的功能强大，可以满足大部分前端项目开发需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/116789
