如何在 Browserify 中使用 Fine-Uploader？

Question

我正在尝试将 Fine-Uploader 与 Browserify 一起使用，但无法使其正常工作。

到目前为止，我已经用 5.4.1 和 5.7.1 版本尝试了两件事：

使用全局 qq 变量，但我得到了一个 Uncaught ReferenceError: qq is not defined(…) 错误，
使用 require('file-uploader') 导致 Uncaught Error: Cannot find module 'fine-uploader'(…) 错误

这是我的package.json的内容：

"browser": {
    "fine-uploader": "./node_modules/fine-uploader/fine-uploader/fine-uploader.js",
    ...
},
"browserify-shim": {
    "fine-uploader": "qq",
    ...
},
"dependencies": {
    "fine-uploader": "^5.7.1",
    ...
}

我查看了 GitHub 存储库。有些问题与我的问题类似但没有给出解决方案（除了 6.x 版本中 require 功能可用之外）

你能帮我弄清楚如何使用 Fine-Uploader 吗？提前致谢。

Answer 1

我认为您的 browserify-shim 选项可能不正确，因为这是您的设置和我的设置之间唯一不同的地方（据我所知）。我能够通过以下方式使用它：

我的package.json:

"dependencies": {
  "fine-uploader": "5.7.1"
},
"devDependencies": {
  "browserify": "13.0.0",
  "browserify-shim": "3.8.12"
},
"browserify": {
  "transform": [
  "browserify-shim"
  ]
},
"browserify-shim": {
  "./node_modules/fine-uploader/fine-uploader/fine-uploader.js": "qq"
},
"browser": {
  "fine-uploader": "./node_modules/fine-uploader/fine-uploader/fine-uploader.js"
}

我的index.js:

var fineuploader = require('fine-uploader')

document.addEventListener( 'DOMContentLoaded', function () {

  var fu = new fineuploader.FineUploader({
    element: document.getElementById('fu')
  })

}, false );

我的index.html:

<html>
  <head>
  </head>
  <body>
    <script type="text/template" id="qq-template">
        <!-- add fine-uploader template here -->
    </script>
    <div id="fu"></div>
    <script src="bundle.js"></script>
  </body>
</html>

然后我可以使用以下方法构建我的包：browserify . -d -o bundle.js 并且当我在浏览器中加载我的 index.html 时可以在 DOM 上看到上传器。

如何在 Browserify 中使用 Fine-Uploader？

How to use Fine-Uploader with Browserify?

javascript

fine-uploader