Vue/Webpack项目配置Loader处理依赖模块的CoffeeScript文件

开发者阿泽

2026-8-3

解决Vue2项目引入PSD.js时的CoffeeScript编译错误

核心原因

Webpack默认不会转译node_modules目录下的文件，而PSD.js依赖的CoffeeScript源码（包括coffee-script/register.js）未被预编译，导致webpack无法识别CoffeeScript语法及文件开头的shebang（#!/usr/bin/env node）。

解决步骤

1. 安装必要依赖

确保已安装处理CoffeeScript的loader及shebang处理工具：

npm install coffeescript coffee-loader shebang-loader --save-dev

2. 修改`vue.config.js`配置

通过chainWebpack配置让webpack处理PSD.js及其依赖的CoffeeScript文件：

module.exports = {
  chainWebpack: config => {
    // 配置CoffeeScript loader处理psd和coffee-script模块中的.coffee文件
    config.module
      .rule('coffee')
      .test(/\.coffee$/)
      .include.add(/node_modules\/(psd|coffee-script)/)
      .end()
      .use('coffee-loader')
      .loader('coffee-loader')
      .options({
        transpile: {
          presets: ['@babel/preset-env']
        }
      })
      .end()

    // 处理coffee-script中.js文件的shebang语法
    config.module
      .rule('shebang')
      .test(/\.js$/)
      .include.add(/node_modules\/coffee-script/)
      .end()
      .use('shebang-loader')
      .loader('shebang-loader')
      .end()
  }
}