导入exif-js库未捕获ReferenceError:未定义EXIF错误

Question

我在rails应用程序中使用vue，并尝试将exif-js library导入到脚本中，以便访问要使用的全局EXIF变量

var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));

我已经通过这些yarn instruction下载了这个包。

yarn add exif-js -- save

我意识到我需要使用javascript import将其包含到我的脚本中，并尝试了

<script>
   import EXIF from 'exif-js'

    previewPhoto() {
      var reader = new FileReader()
      reader.onload = () => {        
        var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
    }

</script>

和其他变量，例如import 'exif-js'，但是我一直收到Uncaught ReferenceError: EXIF is not defined错误。如何成功导入该库，以便可以在脚本中使用它。

Answer 1

您可以通过CommonJS方式使用它：

<script>
  var EXIF = require('exif-js');
  previewPhoto() {
    var reader = new FileReader()
    reader.onload = () => {        
      var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
    }
  }
</script>

Answer 2

import (如果你仔细看看你所链接的MDN文章的顶部)目前并不被大多数/所有浏览器原生支持，尽管浏览器正在努力实现原生es6模块支持。因此，如果您不使用webpack或其他构建工具进行，则需要使用不同的方法。

您可以通过根html文档头部的脚本标记将exif-js库拖放到应用程序中：

<script src="https://unpkg.com/exif-js@2.2.1"></script>

解析文件后，将提供一个全局EXIF变量，您可以运行代码：

previewPhoto() {
    var reader = new FileReader()
    reader.onload = () => {        
        var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
}

请注意，胖箭头函数() =>也将具有limited browser support。