带有 babel 和 handlebars 文件的 Webpack

Question

修订 所以我对此很陌生，我正在努力解决这个问题，所以我非常感谢帮助。

目标：创建使用把手和 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) {},
    }),
  ],
};

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"]
}

Answer 1

您发布的错误意味着 webpack 被要求创建一些引用 node 包的 JS 包，例如 http。在客户端代码包中引用这样的包将不起作用，因为它无法将节点模块打包到 JS 工件中。

确保您通过 webpack 捆绑的文件不需要/导入特定于节点的包。由于看起来您正在创建一个 express 应用程序，因此请将 express 特定文件保存在 webpack 访问的文件夹之外。