1

我们正在构建一个 React 组件，用于将代码片段嵌入 Docusaurus2 页面。该组件使用本地 CSS 文件（它是Prism CSS的修改版本）来突出显示代码片段上的语法。该组件随后作为 NPM 包发布。

将我们的包导入我们的 Docusaurus2 项目时，我们在服务器构建中收到以下错误：ReferenceError: document is not defined

经过调查，似乎 Docusaurus 无法使用本地 CSS 文件或任何本地 CSS 文件。

如果我们将Prism CSS直接导入到我们的组件中，import "prismjs/themes/prism.css";而不是使用 导入本地 CSS 文件import "./prism.css"，则不会出现构建问题。

我们尝试了什么：

  • 我们尝试使用MiniCssExtractPlugin，但最终代码片段中没有更多高亮显示。
  • 我们的临时解决方案是创建一个仅包含 css 文件的 npm 包并将其导入到我们的 React 组件中。通过这样做，项目中不再有构建错误。

以下是我们组件中的文件示例：

webpack.config.js：

const path = require('path');
const nodeExternals = require("webpack-node-externals");

module.exports = {
  mode: 'production',
  entry: './src/index.tsx',
  output: {
    path: path.resolve('lib'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.(t|j)sx?$/,
        exclude: /(node_modules)/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ]
  },
  externals: [nodeExternals()],
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
}

editor.tsx（prism.css 是上面讨论的 css 文件）：

import React from 'react';
import Prism from 'prismjs';
import { ReactCodeJar } from "react-codejar";
import "./prism.css";
import axios from 'axios';
import YAML from 'yaml';

let darkTheme = {
    editorStyle: {
        borderRadius: "25px 25px 25px 0",
        boxShadow: "0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)",
        fontFamily: "'Source Code Pro', monospace",
        fontSize: "14px",
        fontWeight: "400",
        height: "350px",
        letterSpacing: "normal",
        lineHeight: "20px",
        padding: "20px",
        tabSize: "4",

...

包.json：

{
  "name": "ligosnippet",
  "version": "1.0.0",
  "main": "./lib/index.js",
  "scripts": {
    "build": "webpack"
  },
  "files": [
    "lib"
  ],
  "license": "ISC",
  "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.7",
    "@babel/plugin-transform-react-jsx": "^7.8.3",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.3",
    "@babel/preset-typescript": "^7.8.3",
    "@types/node": "^13.9.5",
    "@types/react": "^16.9.23",
    "@types/react-dom": "^16.9.5",
    "@types/styled-components": "^5.0.1",
    "babel-loader": "8.0.6",
    "css-loader": "^3.4.2",
    "parcel-bundler": "^1.12.4",
    "path": "^0.12.7",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "style-loader": "^1.1.3",
    "typescript": "^3.8.3",
    "webpack": "4.41.5",
    "webpack-cli": "^3.3.11",
    "webpack-node-externals": "^1.7.2"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "prismjs": "^1.20.0",
    "react-codejar": "^1.0.1",
    "yaml": "^1.9.2"
  }
}

.babelrc：

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env",
    "@babel/preset-typescript"
  ],
  "plugins": ["@babel/plugin-transform-react-jsx"]
}
4

0 回答 0