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存储库。有些问题与我的问题类似，但没有给出解决方案（除了require功能将在 6.x 版本中提供）

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

Answer 1

我想也许你的browserify-shim选项不正确只是因为这是你的设置与我的唯一不同（AFAIK）。我能够使用以下内容：

我的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？

1 个答案: