這可能是一個基本問題，但出于某種原因，谷歌不會給我答案。
我的 src/ 檔案夾中有一個名為 dropzone.stub.js 的檔案
import { Dropzone } from "dropzone";
Dropzone.autoDiscover = true;
// Callback takes one argument and that is the file that was
// added.
export default function createDropZone(selector, url, callback) {
const myDropzone = new Dropzone(selector, { url: url });
myDropzone.on("addedfile", callback);
}
基本上我只是想從我的 HTML 檔案中的腳本標簽中呼叫它。
我的 webpack bundler 配置如下：
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/dropzone.stub.js',
output: {
filename: 'dropzone.bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
// presets: ['@babel/preset-env', {targets: 'defaults'}]
}
}
},
// {
// test: /\.css$/i,
// use: ['style-loader', 'css-loader'],
// },
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
],
// resolve: {
// extensions: [ '.js', '.jsx', '.css' ],
//}
},
};
目前我的 HTML 瀏覽器中的腳本部分如下所示：
<script type="module">
import { createDropZone } from '/static/dist/dropzone.bundle.js';
</script>
瀏覽器報如下錯誤：
Uncaught SyntaxError: The requested module '/static/dist/dropzone.bundle.js' does not provide an export named 'createDropZone'
任何人的想法？
uj5u.com熱心網友回復：
您正在嘗試從 webpack 范圍之外匯入 webpack 轉譯模塊，但該模塊不起作用。你真的只有我知道的 2 個選項。您可以將匯入陳述句從 html 檔案移動到 javascript 檔案，例如app.js或其他檔案，并通過 webpack 運行所有內容，或者您??需要將 babel 與 webpack 一起使用。我更喜歡前者，但如果這不是一個選項，那么這可能會幫助您指明正確的方向https://webpack.js.org/loaders/babel-loader/
uj5u.com熱心網友回復：
捆綁的檔案是什么樣的。Webpack 很可能不會將其捆綁為 es 模塊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401975.html
標籤：javascript 网络包