Webpack拿着巴贝尔和把手的档案
Webpack拿着巴贝尔和把手的档案
提问于 2020-12-09 19:59:15
修改后，我对此相当陌生，而且我一直在努力解决这个问题，所以我非常感谢您的帮助。
目标：创建动态网页，使用工具栏和D3进行动态文本和可视化。
到目前为止我所取得的成果：使用存储在其中的json文件进行一些数据操作，并使用hbs和express呈现数据。创建简单的条形图，使用上一个文件中的数据。
问题：，我不知道如何完全设置webpack，这样我才能真正看到我的页面是什么样子的。如果我只是将带有D3可视化的脚本添加到需要的hbs中是没有定义的，这是我得到的，因为客户端不支持它。
文件夹结构
|main
|data
|data.json
|src
|index.js
|visuals.js
|templates
|views
|index.hbs
|node_modules
|package.json
|package-lock.json
|webpack.config.js
|babel.config.json到目前为止，我的代码(这里可能有很多东西，因为我尝试了很多东西，而且我是匿名的，因为我有敏感的项目)。
index.js：
const express = require("express");
const fs = require("fs");
const path = require("path");
const hbs = require("hbs");
const Data = JSON.parse(
fs.readFileSync(path.resolve(__dirname, "../data/data.json")).toString()
);
//Some data manipulation
module.exports = clusters; //array to be used in the other file
const app = express();
const publicDirectoryPath = path.join(__dirname, "..");
const viewPath = path.join(__dirname, "../templates/views");
app.set("view engine", "hbs");
app.set("views", viewPath);
app.use(express.static(publicDirectoryPath));
app.get("", (req, res) => {
res.render("index", {
data1: data1,
data2:data2,
});
});visuals.js的开始
const d3 = require("d3");
var dt = require("./index.js");
const clusters = dt.clusters;webpack.config.js
const path = require("path");
const HandlebarsPlugin = require("handlebars-webpack-plugin");
module.exports = {
entry: [
path.resolve(__dirname, "./src/visuals.js"),
path.resolve(__dirname, "./src/index.js"),
],
output: {
path: path.resolve(__dirname, "./public"),
filename: "bundle.js",
},
module: {
rules: [
{ test: /\.handlebars$/, loader: "handlebars-loader" },
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
],
},
resolve: {//I had errors and warnings with modules, below solved it
modules: [path.resolve(__dirname), "node_modules/"],
extensions: [".js", ".json"],
descriptionFiles: ["package.json"],
},
fallback: {
stream: false,
http: false,
buffer: false,
crypto: false,
zlib: false,
fs: false,
net: "empty",
},
},
plugins: [
new HandlebarsPlugin({//can't say I understood from documentation the setup for hbs
entry: path.resolve(__dirname, "./templates/views/index.hbs"),
output: path.resolve(__dirname, "./public/index.html"),
data: path.resolve(__dirname, "./data/data.json"),
onBeforeSetup: function (Handlebars) {},
onBeforeCompile: function (Handlebars, templateContent) {},
onBeforeRender: function (Handlebars, data, filename) {},
onBeforeSave: function (Handlebars, resultHtml, filename) {},
onDone: function (Handlebars, filename) {},
}),
],
};package.json
{
"name": "triana_plus",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"start": "webpack serve --config ./webpack.config.js --open chrome"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.10",
"babel-loader": "^8.2.2",
"handlebars-webpack-plugin": "^2.2.1",
"webpack": "^5.10.1",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-node-externals": "^2.5.2"
},
"dependencies": {
"d3": "^6.3.1",
"express": "^4.17.1",
"fs": "0.0.1-security",
"handlebars-loader": "^1.7.1",
"hbs": "^4.1.1",
"net": "^1.0.2",
"path": "^0.12.7",
"request": "^2.88.2"
}
}babel.config.json
{
"presets": ["@babel/preset-env"]
}回答 1
Stack Overflow用户
发布于 2020-12-10 20:01:28
您发布的错误意味着webpack被要求创建一些引用节点包(如http )的JS包。在客户端代码包中引用类似的包是行不通的，因为它不能在JS构件中打包节点模块。
确保您通过webpack捆绑的文件不需要/导入特定于节点的包。因为看起来你在创建一个特快专递应用程序，所以请将特快专递文件保存在webpack访问的文件夹之外。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65224001
复制相关文章
相似问题
腾讯云开发者
