![](/img/trans.png)
[英]Uncaught ReferenceError: foo is not defined when using TypeScript + Webpack
[英]Uncaught ReferenceError: knockout is not defined - typescript, knockout and webpack issue
我正在尝试使用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
尝试改变
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”软件包!
我通过安装“ npm我基因敲除--save”和“ npm我基因敲除.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"
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.