Unexpected character '#'

记两个编译报错（项目环境：vue-cli3）

我在项目中引入了一个可以把 psd 文件转成 json 的库 psd.js，然后就报了下面这两个错误

第一个：

1. 报错信息

Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
> #!/usr/bin/env node

2. 错误解释

#!/usr/bin/env node 表示代码是一个可执行脚本，它不应该同时是一个模块。 库文件和可执行文件应该是分开的，因为CLI只是一种使用库的方法，如果您自己使用库，您当然不希望在您的应用程序中包含CLI部分。

3. 解决办法

可以使用问题 webpack issue #2168 中提到的 shebang-loader，将其添加到 js 规则中即可删除该行。

• 安装 npm install shebang-loader --save-dev

• 我用的 vue-cli3，所以在 vue.config.js 里添加：

    module.exports = {
    	chainWebpack: config => {
    		config.module
    			.rule('!#')
    			.test(/coffee/)
    			.use('shebang-loader')
    			.loader('shebang-loader')
    			.end()
    	}
    }
  

4. 参考

Webpack report an error about Unexpected character ‘#’
Module parse failed. Unexpected character ‘#’. #4603

第二个：

1. 报错信息

Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.

2. 错误解释

psd.js 这个库依赖 coffeescript ，webpack 在解析 coffeescript 的时候报的错。需要安装相应的依赖。

3. 解决办法

• 安装 npm install coffee-loader --save-dev

• 安装 npm install coffeescript@1.1.1 --save-dev。coffee-loader 是0.9.0版本的，对应的coffeescript 要是 1.x.x 版本的，不然也会报错，我安装的是 1.1.1版本。
  

• vue.config.js 里添加：

    module.exports = {
    	chainWebpack: config => {
    		config.module
    			.rule('!#')
    			.test(/coffee/)
    			.use('shebang-loader')
    			.loader('shebang-loader')
    			.end()
    		config.module
    		      .rule('coffee')
    		      .test(/\.coffee$/)
    		      .use('coffee-loader')
    		      .loader('coffee-loader')
    		      .end()
    	}
    }
  

4. 参考

Error when using with Browserify #116
coffee-loader

还有一个：

以上两个错误解决了之后又会报下面这个错误，这是调用 fromFile 方法里用到了 node，可以试一下直接运行那个 js 文件是可以的。

本来是想在浏览器用这个库的，看来是不行了。