Parcel如何配置输出.min.js文件、实现源码lint校验与代码美化？

问题1：构建产物自动添加.min.js后缀 #

Parcel 2 支持通过target配置直接自定义输出文件名规则，你只需在现有package.json的targets.lite-maps配置段中新增fileName字段即可，无需额外插件：

"targets": {
  "lite-maps": {
    "source": ["./path/file1.js", "./path/file2.js", "./path/file3.js"],
    "distDir": "./path/build/",
    "fileName": "[name].min.js",
    "hashed": false // 不需要内容哈希后缀可保留这行，需要哈希的话直接删除即可
  }
}

修改后重新执行npm run build，输出的产物就会自动带上.min.js后缀。

问题2：集成代码lint校验与格式化 #

Parcel 本身不内置代码校验、格式化能力，你可以配合前端生态常用的ESLint（校验）+ Prettier（格式化）实现，步骤如下：

1. 安装依赖：

npm install eslint prettier --save-dev

2. 在项目根目录新建对应配置文件：
   • 新建.eslintrc.json配置ESLint校验规则
   • 新建.prettierrc配置Prettier格式化规则
3. 修改package.json的scripts配置，通过npm原生钩子实现每次打包/监听前自动执行校验和格式化：

"scripts": {
  "lint": "eslint ./path/源码目录/**/*.js",
  "format": "prettier --write ./path/源码目录/**/*.js",
  "prewatch": "npm run lint && npm run format",
  "watch": "parcel watch --no-hmr",
  "prebuild": "npm run lint && npm run format",
  "build": "parcel build"
}

配置完成后，每次执行npm run build或者npm run watch时，会自动先跑代码校验和格式化，再执行Parcel的对应操作。如果需要开发过程中修改代码保存时自动触发校验，可直接在编辑器中安装ESLint、Prettier插件并开启保存自动执行功能即可。

内容的提问来源于stack exchange，提问作者Uriahs Victor