javascript - 带有 babel 和 handlebars 文件的 Webpack
问题描述
已修订所以我对此很陌生,我正在努力解决这个问题,所以我非常感谢帮助。
目标:创建使用把手和 D3 用于动态文本和视觉效果的动态网页。
到目前为止我所取得的成就:使用存储在其中的 json 文件进行一些数据操作,并使用 hbs 和 express 呈现数据。创建了使用上一个文件中的数据的简单条形图。
问题:我不确定如何完全设置 webpack,所以我可以实际看到我的页面的样子。如果我只是将带有 D3 视觉效果的脚本添加到 hbs,我得到的 require 是未定义的,这是因为客户端不支持它。
文件夹结构
|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) {},
}),
],
};
包.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"]
}
解决方案
您发布的错误意味着 webpack 被要求创建一些引用节点包的 JS 包,例如http
. 在客户端代码包中引用这样的包将不起作用,因为它无法将节点模块打包到 JS 工件中。
确保通过 webpack 捆绑的文件不需要/导入特定于节点的包。由于看起来您正在创建一个 express 应用程序,因此请将 express 特定文件保存在 webpack 访问的文件夹之外。
推荐阅读
- python - 用 python 编写 Xlsx 文件 - Excel 文件上的空白行
- r - 字符串的组合
- python-3.x - how to input in multiple lines in Python 3.7
- tfs - 将待办事项与功能相关联
- java - 尝试使用类路径运行 Java 程序;java 找不到我原来的编译类
- ionic-framework - 使用 Ionic 3 中的相机拍摄的 FTP 上传图像
- typescript - 在 vscode 中快速调试打字稿
- python - Plotting a Function Over Multiple Constants
- javascript - NodeJS:为什么 new Date().toLocaleString() 忽略系统时区?
- java - Error in netbeans when try to run program: Truncated module-info.class