未捕获ReferenceError:未定义基因敲除- typescript、基因敲除和webpack问题

Question

我正在尝试使用Typescript和webpack实现Knockout，但是找不到它。我已经安装了npm "@types/knockout"："^3.4.66“和"@types/knockout.validation"："0.0.37”。

SignerViewModel.ts

import * as ko from "knockout";

export class SignerViewModel {
    public addressInfo: KnockoutObservable<string>;
    public choosen: KnockoutObservable<boolean>;
    public companyName: KnockoutObservable<string>;
    ...
}

index.cshtml

@section scripts
{
    <script src="~/Scripts/app.js"></script>
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    devtool: 'source-map',
    entry: './Scripts/Ts-build/App',
    mode: 'development',
    target: 'web',
    watch: true,

    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, './Scripts')
    },

    module: {
        rules: [{
            test: /\.(js)?$/,
            include: path.resolve(__dirname, './Scripts/Ts-build/'),
            exclude: /node_modules/
        },
        {
            enforce: "pre",
            test: /\.js$/,
            loader: "source-map-loader"
        }
        ]
    },

    resolve: {
        extensions: [".webpack.js", ".web.js", ".js"]
    },

    externals: {
        "jquery": "jQuery",
        "knockout": "knockout"
    },

    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            knockout: 'knockout'
        })
    ]
};

当我用webpack编译它时，我没有得到任何错误。但当我运行它时，我在浏览器中得到以下错误：

Uncaught ReferenceError: knockout is not defined
    at Object.knockout (external "knockout":1)
    at __webpack_require__ (bootstrap:19)
    at Object../Scripts/Ts-build/ViewModels/SignerViewModel.js (SignerViewModel.ts:3)
    at __webpack_require__ (bootstrap:19)
    at Object../Scripts/Ts-build/App.js (App.ts:2)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

Answer 1

试着改变

   new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        knockout: 'knockout'
    })

要这样做：

new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        ko: 'exports-loader?!knockout'

    })

并确保你有"exports-loader“包！

Answer 2

我通过安装"npm I knockout --save“和"npm I knockout.validation --save”解决了这个问题，然后从webpack.config中删除了这个问题

SignerViewModel.ts

import * as bootstrap from "bootstrap";
import * as $ from 'jquery';
import * as ko from "knockout";
import * as validation from "knockout.validation";

export class SignerViewModel {
    public addressInfo: KnockoutObservable<string>;
    public choosen: KnockoutObservable<boolean>;
    public companyName: KnockoutObservable<string>;
    ...
}

$(document).ready(() => {
    validation.registerExtenders();
    validation.init({ decorateInputElement: true, errorElementClass: "error" });
    ko.applyBindingsWithValidation(new SignerViewModel());
});

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    devtool: 'source-map',
    entry: './Scripts/Ts-build/App',
    mode: 'development',
    target: 'web',
    watch: true,

    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, './Scripts')
    },

    module: {
        rules: [{
            test: /\.(js)?$/,
            include: path.resolve(__dirname, './Scripts/Ts-build/'),
            exclude: /node_modules/
        },
        {
            enforce: "pre",
            test: /\.js$/,
            loader: "source-map-loader"
        }
        ]
    },

    resolve: {
        extensions: [".webpack.js", ".web.js", ".js"]
    },

    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    },

    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ]
};

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "knockout": "^3.4.2",
    "knockout-mapping": "^2.6.0",
    "knockout.validation": "^2.0.3",
    "ts-loader": "^6.0.4",
    "underscore": "^1.9.1"
  },
  "devDependencies": {
    "@types/bootstrap": "^4.3.1",
    "@types/jquery": "^3.3.30",
    "@types/knockout": "^3.4.66",
    "@types/knockout.validation": "0.0.37",
    "@types/node": "^12.6.9",
    "exports-loader": "^0.7.0",
    "jquery": "^3.4.1",
    "lodash": "^4.17.15",
    "popper.js": "^1.15.0",
    "source-map-loader": "^0.2.4",
    "typescript": "^3.5.3",
    "webpack": "^4.39.0",
    "webpack-cli": "^3.3.6"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"
}