在前端开发中，我们常常需要一些常用的工具，例如编译代码、运行测试、生成文档等等。在使用这些工具时，我们会有一些固定的流程和配置。为了避免重复劳动和繁琐的配置，我们可以使用 npm 包 @tunnckocore/scripts 来简化我们的开发流程。
什么是 @tunnckocore/scripts
@tunnckocore/scripts 是一个集成了前端开发常用工具的 NPM 包，其中包括：
- webpack：用于打包 JavaScript 代码
- webpack-dev-server：用于启动本地开发服务器
- babel：用于将 ES6+ 代码转换为 ES5 代码
- eslint：用于代码规范检查
- jest：用于单元测试
@tunnckocore/scripts 将这些工具集成在一起，并提供了一些默认的配置，使得我们可以快速地进行开发和测试。
如何使用 @tunnckocore/scripts
使用 @tunnckocore/scripts 非常简单，只需要在项目中安装该包，并使用其中提供的 npm script 即可。具体步骤如下：
步骤一：创建项目
首先，我们需要创建一个新项目。打开命令行，运行以下命令：
----- ---------- -- ---------- --- ---- --
这样就创建了一个新项目，并初始化了一个 package.json 文件。
步骤二：安装 @tunnckocore/scripts
接下来，我们需要安装 @tunnckocore/scripts 包。运行以下命令：
--- ------- -------------------- ----------
步骤三：编辑 package.json
在 package.json 文件中，找到 scripts 字段，添加以下内容：
---------- - -------- --------------------- ------- -------- --------------------- ------- ------- --------------------- ----- -
这表示我们可以使用 npm run start 命令启动开发服务器，使用 npm run build 命令打包代码，使用 npm run test 命令运行测试。
步骤四：运行命令
现在，我们就可以使用 @tunnckocore/scripts 提供的命令了。打开命令行，运行以下命令：
--- --- -----
这样就启动了开发服务器，可以在浏览器中访问 http://localhost:8080 进行开发了。
要打包代码，运行以下命令：
--- --- -----
打包后的代码会放在 dist 目录下。
要运行测试，运行以下命令：
--- --- ----
步骤五：自定义配置
如果需要自定义配置，可以在项目根目录下创建一个 tunncko.config.js 文件。在该文件中，可以覆盖默认配置。例如，以下是一个可以将打包后的代码输出到 docs 目录下的配置：
-- -----------------
-------------- - -
------ -
----------- ------
-
-步骤六：使用 ESLint
如果需要使用 ESLint 进行代码规范检查，可以在项目根目录下创建一个 .eslintrc.js 文件。在该文件中，可以配置 ESLint 的规则。例如，以下是一个只允许单引号的规则：
-- ------------
-------------- - -
------ -
------- --- ---------
-
-总结
@tunnckocore/scripts 提供了一个集成了前端开发常用工具的 NPM 包，可以极大地简化我们的开发流程。使用 @tunnckocore/scripts 非常简单，只需要安装该包，并使用其中提供的 npm script 即可。如果需要自定义配置或使用 ESLint 进行代码规范检查，可以在项目根目录下创建相应的配置文件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f088147403f2923b035bff6