我现在用js创建了一个简单的HTML页面以添加更多功能，我添加了webpack并安装了一些节点程序包并运行npm start webpack，它可以正常运行，并且我可以访问localhost：8080，但是它会引发导入错误并导出关键字。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack-dev-server --inline --hot",
"start": "http-server"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.51",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-register": "^6.26.0",
"jsxobj": "^1.1.0",
"webpack": "^4.12.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"babel-eslint": "^7.2.3",
"babel-preset-es2015": "^6.24.1",
"path": "^0.12.7"
}
var nodeExternals = require("webpack-node-externals");
module.exports = {
entry: "./js/index.js",
mode: "development",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
target: "node",
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
}
]
},
devtool: "source-map",
resolve: {
extensions: [".html", ".js", ".json", ".css", ".less"]
}
};
import { fetchImage } from "../alphabet.js";
let i = 0;
const colorBox = {
red: "#f00000",
green: "#38c138",
blue: "#0a6de8",
orange: "#e69110",
chocolate: "#1b1818",
purple: "#632363",
yellow: "#f1e904",
bottle: "#102923",
black: "#000000",
white: "#d4d4d4"
};
const len = Object.keys(colorBox).length;
document.addEventListener(
"keydown",
e => {
const key = e.key;
i++;
i = i % len == 0 ? 1 : i;
let qs = document.querySelector(".alphabet");
document.body.style.backgroundColor = Object.values(colorBox)[i];
let str = key.toUpperCase();
qs.innerHTML = str;
fetchImage(key);
},
false
);
"use strict";
const fruits = {
a: "apple",
b: "banana",
c: "coconut",
e: "elephant",
g: "grapes",
l: "lemon",
m: "mango",
o: "orange",
p: "pineapple",
s: "strawberry",
t: "tomato"
};
export const fetchImage = letter => {
console.log("letter", letter);
const myHeaders = new Headers({
"Content-Type": "image/jpeg"
});
const myInit = {
method: "GET",
headers: myHeaders,
mode: "same-origin"
};
const fruit = fruits[letter] || "tamarindo";
console.log("fruit", fruit);
const myRequest = new Request(`./fruits/${fruit}.png`, myInit);
fetch(myRequest)
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
console.log("inside then");
var objectURL = URL.createObjectURL(myBlob);
const img = new Image(200);
img.src = objectURL;
let element = document.getElementById("figure");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
element.appendChild(img);
});
};.content {
display: grid;
grid-template: auto/ repeat(2, 1fr);
align-items: center;
justify-content: center;
justify-items: center;
color: white;
grid-gap: 10px;
font-weight: 700;
font-family: 'Open Sans';
text-transform: uppercase;
background-color: transparent;
}
.alphabet {
font-size: 25em;
}<body>
<div class="content">
<section class="alphabet"></section>
<figure id="figure"></figure>
</div>
<script src="./js/index.js"></script>
</body>
{{
"presets": ["env", {
"targets": {
"node": "current"
}
}]
}
如何使简单的JS程序理解导出和导入关键字？
答案 0 :(得分：1)
您正在Webpack中使用target: node，这在浏览器上不起作用，尤其是在nodeExternals上。尝试删除以下几行：
target: "node"：在nodejs使用脚本时使用，只需将其删除，默认情况下它将设置为target: "browser"。externals: [nodeExternals()]-表示不要将这些软件包捆绑到生成的文件中，但是在这种情况下，浏览器将无法找到它们。只需删除此行。 工作gist
主要变化：
index.html中的脚本package.json：为简单起见，删除了不必要的软件包并更新了与babel相关的软件包（以便与babel 7配合使用），并更新了webpack脚本（请参见评论）webpack.config.js：已删除target: "node"和所有与节点相关的内容