带有 Vanilla TypeScript 和 WebPack 的 CodeMirror

Question

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

申请代码

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: [
    // 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 布局已损坏：

如能advice/direction指出我哪里出错了，将不胜感激。

Answer 1

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

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

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);
    }
}

带有 Vanilla TypeScript 和 WebPack 的 CodeMirror

CodeMirror with Vanilla TypeScript and WebPack

codemirror

typescript

webpack

申请代码

package.json

webpack.config（规则部分）