ParcelJS生产构建时如何指定选用node_modules中的.min压缩资源文件

直接 import 'animate.css' 能不能自动实现开发引源码、生产引压缩版？ #

默认不行。Parcel 解析 npm 包时会优先读取包 package.json 中指定的 main 字段，也就是你提到的 animate.css，无论开发还是生产环境，默认都会加载这个文件，不会自动切换到压缩版。

但这里有个更省事的结论：你完全不需要手动引入 animate.min.css。Parcel 生产模式（执行 parcel build 时）自带全量 CSS 压缩能力，哪怕你引入的是未压缩的 animate.css，最终构建出来的产物里的样式已经是经过压缩、去冗余处理的，和手动引入 animate.min.css 的效果完全一致，不需要额外做任何配置。

如果一定要手动区分环境引入不同文件的配置方法 #

如果出于特殊需求必须严格对应包内的两个文件，你可以通过 Parcel 的别名功能配合环境变量实现，操作如下：

• 方案1：通过代码条件引入

// 直接在入口文件中添加这段代码即可，Parcel 会自动根据环境剔除无用导入
if (process.env.NODE_ENV === 'production') {
  import('animate.css/animate.min.css')
} else {
  import('animate.css')
}

• 方案2：通过别名配置实现
  在项目根目录的 package.json 中添加如下配置：

{
  "alias": {
    "animate.css": "./node_modules/animate.css/animate.css"
  },
  "@parcel/resolver": {
    "alias": {
      "animate.css": "./node_modules/animate.css/animate.min.css"
    }
  }
}

该配置下开发模式会优先读取外层 alias 指向的未压缩文件，生产模式会走 @parcel/resolver 下的别名配置指向压缩文件。

package.json 的 files 字段能不能辅助实现这个需求？ #

不能。files 字段是 npm 包发布时用来指定需要上传到 npm registry 的文件范围的配置，和打包工具的依赖解析逻辑无关，不会影响 Parcel 加载包内文件的选择。

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