node.js - כיצד לאגד CSS של מודול Node לתוך תוסף VSCode

תוסף Visual Studio Code שלי משתמש במודול node highlight.js שמגיע עם תיקייה מלאה בקבצי CSS. הם מספקים סכמות צבעים לצביעת תחביר. הפך להיות נחוץ לאגד חלק מקבצי ה-CSS.

זוהי על חבילה של נכס

המטרה היא לאגד קובץ CSS ובזמן ריצה לגשת לתוכן הקובץ כמחרוזת. אם ניתן להשיג זאת בלי משפט ייבוא זה יהיה מושלם. בדרך כלל, איך לגשת בדיוק לתוכן של הקובץ המאוחד יהיה שאלה נפרדת, אבל יש לי תחושה ששליפת התוכן ואיך יש לגשת לאגידת הנכס קשורים זה בזה באופן הדוק.

אני מודה בגלוי שיש לי הבנה חלשה של WebPack.

הסיפור עד כה

המאגד מצוין ב-package.json כ-"webpack": "^5.4.0" אבל אני לא יודע כיצד לוודא מה למעשה קיים. ייתכן שיש משהו לא תקין בהגדרות שלי: כשאני מנסה להריץ webpack --version בפקודת שורת הפקודה בתיקיית הפרויקט, זה מגיב

CLI for webpack must be installed.
  webpack-cli (https://github.com/webpack/webpack-cli)

We will use "npm" to install the CLI via "npm install -D webpack-cli".
Do you want to install 'webpack-cli' (yes/no):

פעם ראשונה שזה קרה עניתי כן. לאחר סדרת התקנות וניסיון נוסף קרה אותו הדבר. עם זאת, vsce package לא נתקל בבעיות בשימוש ב-webpack לבניית גרסת פרודקשן ולחיצה על F5 לניפוי שגיאות מצליחה להרכיב גרסת פיתוח בתיקיית dist עם קובץ לא מכווץ שאני יכול לבדוק (וזה איך שאני יודע שהקובץ שהוזכר למטה נארז).

ממשיך מכאן שיניתי את webpack.config.js כך

//@ts-check

'use strict';

const path = require('path');

/**@type {import('webpack').Configuration}*/
const config = {
  target: 'node', // vscode extensions run in a Node.js-context -> https://webpack.js.org/configuration/node/

  entry: './src/extension.ts', // the entry point of this extension, -> https://webpack.js.org/configuration/entry-context/
  output: {
    // the bundle is stored in the 'dist' folder (check package.json), -> https://webpack.js.org/configuration/output/
    path: path.resolve(__dirname, 'dist'),
    filename: 'extension.js',
    libraryTarget: 'commonjs2',
    devtoolModuleFilenameTemplate: '../[resource-path]'
  },
  devtool: 'source-map',
  externals: {
    vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, -> https://webpack.js.org/configuration/externals/
  },
  resolve: {
    // support reading TypeScript and JavaScript files, -> https://github.com/TypeStrong/ts-loader
    extensions: ['.ts', '.js', '.css']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};
module.exports = config;

כפי שאתה יכול לראות, יש כללים וטוענים ל-CSS.

כאשר אני מוסיף את הייבוא הזה

import "../node_modules/highlight.js/styles/atelier-dune-light.css";

webpack בונה את החבילה בשמחה וכשאני בודק אותה אני יכול למצוא את קבצי ה-CSS המבוצרים.

עם זאת, כאשר אני מנסה לטעון את התוסף במארח הדיבוג של התוספים, הוא נכשל בטעינה, עם ההודעה הזאת.

הפעלת ההרחבה 'pdconsec.vscode-print' נכשלה: המסמך אינו מוגדר.

הפעלת עצירה על חריגים שנתפסו חושפת את החריגה המפתיעה הזו.

Exception has occurred: Error: Cannot find module 'supports-color'
Require stack:
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\get-uri\node_modules\debug\src\node.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\get-uri\node_modules\debug\src\index.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\get-uri\dist\index.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\vscode-proxy-agent\out\agent.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\vscode-proxy-agent\out\index.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js

אוקיי, אז ההפעלה נכשלה כי הטוען התרסק. אבל מה לעזאזל לייבוא CSS קשור ל-support-color?

הסר את הייבוא וזה רץ רק בסדר. אני באמת לא יודע איך להגיב על זה; לא ברור לי מדוע בקשה לגליון סגנונות צריכה לגרום לשגיאה הזו. בשלב זה אני פונה לאחרים לקבלת הדרכה וייעוץ.

תשובה #1

הסר את style-loader מ-webpack.config.js כדי לתקן את השגיאה.

משוך את ה-CSS כמחרוזת כך. שים לב לנתיב המוקטן.

const cssPath: string = "highlight.js/styles/atelier-dune-light.css";
const theCss: string = require(cssPath).default.toString();

אתה לא צריך את הצהרת import, השימוש ב-require יגרום ל-webpack לארוז את הקבצים, אבל עדיין עליך להסיר את style-loader כדי להימנע משגיאת ה-loader.