CodeMirror与Vanilla TypeScript和WebPack

Posted 2023-01-18

我正在尝试使用WebPack模块捆绑器在一个vanilla TypeScript javascript应用程序中使用CodeMirror（没有React或Angular但使用Bootstrap 4作为CSS框架）。

Application Code

import * as CodeMirror from 'codemirror';
import 'codemirror/mode/xml/xml.js';
import 'codemirror/theme/blackboard.css';

const definition: htmlTextAreaElement = document.getElementById('Definition')
   as HTMLTextAreaElement;

const config: CodeMirror.EditorConfiguration = 
    tabSize: 3,
    lineNumbers: true,
    mode: 'xml',
    theme: 'blackboard'
;

const editor = CodeMirror.fromTextArea(definition, config);

package.json

    "dependencies": 
        "@types/codemirror": "0.0.72",
        "@types/jquery": "^3.3.22",
        "bootstrap": "^4.1.3",
        "codemirror": "^5.45.0",
        "font-awesome": "^4.7.0",
        "jquery": "^3.3.1",
        "popper": "^1.0.1",
        "popper.js": "^1.14.6"
    ,
    "devDependencies": 
        "@babel/core": "^7.1.6",
        "@babel/preset-env": "^7.1.6",
        "autoprefixer": "^9.3.1",
        "babel-loader": "^8.0.4",
        "clean-webpack-plugin": "^0.1.19",
        "copy-webpack-plugin": "^4.6.0",
        "css-loader": "^1.0.1",
        "cssnano": "^4.1.7",
        "extract-text-webpack-plugin": "^3.0.2",
        "fetch": "^1.1.0",
        "file-loader": "^2.0.0",
        "font-awesome-loader": "^1.0.2",
        "html-webpack-plugin": "^3.2.0",
        "json-loader": "^0.5.7",
        "mini-css-extract-plugin": "^0.4.5",
        "node-sass": "^4.10.0",
        "optimize-css-assets-webpack-plugin": "^5.0.1",
        "postcss-loader": "^3.0.0",
        "precss": "^3.1.2",
        "raw-loader": "^0.5.1",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.1",
        "ts-loader": "^5.3.1",
        "typescript": "^3.2.1",
        "uglifyjs-webpack-plugin": "^2.0.1",
        "url-loader": "^1.1.2",
        "webpack": "^4.27.0",
        "webpack-cli": "^3.1.2",
        "webpack-node-externals": "^1.7.2"
    

webpack.config (Rules Section)

rules: [
    // JavaScript
    
        test: /\.jsx?$/, // JavaScript and Reactive JavaScript
        exclude: /node_modules/,
        use: 
            loader: 'babel-loader', // Transpiles ES6 JavaScript files
            options: 
                presets: ['@babel/preset-env']
            
        
    ,

    // TypeScript
    
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/
    ,

    // CSS
    
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
    
]

应用程序编译和构建时没有错误，并且没有控制台日志记录错误，但CodeMirror布局已损坏：

任何有关我出错的建议/指示都将不胜感激。

答案

我最终得到了这个工作。问题与我的webpack.config有关，特别是我需要配置postcss插件。这是我的工作代码。

注意，我不能保证方法或输出的效率，但至少我有它的工作。如果有人可以建议替代/更好的方法，请告诉我。谢谢。

的package.json

"postcss": 
    "plugins": 
        "postcss-plugin": 
    

webpack.config

    test: /\.css$/,
    use: [
        'style-loader',
         loader: 'css-loader', options:  importLoaders: 1  ,
        'postcss-loader'
    ]
,

CodeMirror.ts

import * as CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/display/fullscreen.css';
import 'codemirror/theme/neat.css';
import 'codemirror/mode/xml/xml.js';
import 'codemirror/addon/display/fullscreen.js';
import '../../styles/components/_codemirror.css';


export class CodeMirrorManager 

    public editor: CodeMirror.Editor;

    config: CodeMirror.EditorConfiguration = 
        tabSize: 3,
        lineNumbers: true,
        mode: 'xml',
        theme: 'neat',
        extraKeys: 
            "F11": function (cm) 
                if (cm.getOption("fullScreen")) 
                    cm.setOption("fullScreen", false);
                 else 
                    cm.setOption("fullScreen", true);
                
            ,
            "Esc": function (cm) 
                if (cm.getOption("fullScreen")) 
                    cm.setOption("fullScreen", false);
                
            
        
    ;

    // CTOR
    constructor(private readonly tagElement: HTMLTextAreaElement) 
        this.editor = CodeMirror.fromTextArea(this.tagElement, this.config);