在前端开发中，我们常常需要一些常用的工具，例如编译代码、运行测试、生成文档等等。在使用这些工具时，我们会有一些固定的流程和配置。为了避免重复劳动和繁琐的配置，我们可以使用 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 即可。具体步骤如下：
步骤一：创建项目
首先，我们需要创建一个新项目。打开命令行，运行以下命令：
mkdir my-project cd my-project npm init -y
这样就创建了一个新项目，并初始化了一个 package.json 文件。
步骤二：安装 @tunnckocore/scripts
接下来，我们需要安装 @tunnckocore/scripts 包。运行以下命令：
npm install @tunnckocore/scripts --save-dev
步骤三：编辑 package.json
在 package.json 文件中，找到 scripts 字段，添加以下内容：
"scripts": {
"start": "tunncko-core-scripts start",
"build": "tunncko-core-scripts build",
"test": "tunncko-core-scripts test"
}这表示我们可以使用 npm run start 命令启动开发服务器，使用 npm run build 命令打包代码，使用 npm run test 命令运行测试。
步骤四：运行命令
现在，我们就可以使用 @tunnckocore/scripts 提供的命令了。打开命令行，运行以下命令：
npm run start
这样就启动了开发服务器，可以在浏览器中访问 http://localhost:8080 进行开发了。
要打包代码，运行以下命令：
npm run build
打包后的代码会放在 dist 目录下。
要运行测试，运行以下命令：
npm run test
步骤五：自定义配置
如果需要自定义配置，可以在项目根目录下创建一个 tunncko.config.js 文件。在该文件中，可以覆盖默认配置。例如，以下是一个可以将打包后的代码输出到 docs 目录下的配置：
// tunncko.config.js
module.exports = {
build: {
outputPath: 'docs'
}
}步骤六：使用 ESLint
如果需要使用 ESLint 进行代码规范检查，可以在项目根目录下创建一个 .eslintrc.js 文件。在该文件中，可以配置 ESLint 的规则。例如，以下是一个只允许单引号的规则：
// .eslintrc.js
module.exports = {
rules: {
quotes: [2, 'single']
}
}总结
@tunnckocore/scripts 提供了一个集成了前端开发常用工具的 NPM 包，可以极大地简化我们的开发流程。使用 @tunnckocore/scripts 非常简单，只需要安装该包，并使用其中提供的 npm script 即可。如果需要自定义配置或使用 ESLint 进行代码规范检查，可以在项目根目录下创建相应的配置文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f088147403f2923b035bff6