Webpack 帶 babel 和車把文件

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 被要求創建一些引用節點包的 JS 包，例如http 。 在客戶端代碼包中引用這樣的包將不起作用，因為它不能在 JS 工件中使用 package 節點模塊。

確保通過 webpack 捆綁的文件不需要/導入特定於節點的包。 由於看起來您正在創建一個 express 應用程序，因此請將 express 特定文件保留在 webpack 訪問的文件夾之外。