Question

我正在使用Knockout-Validation插件创建一个Knockout Web应用程序。我想使用WebPack进行捆绑。

问题是当我使用WebPack时，Knockout-Validation会中断。

作为一个简单的测试案例，我可以在不捆绑的情况下使验证工作正常：https://jsfiddle.net/3y24zvLs/

HTML：

<label>Name</label>
<input type="text" data-bind="value: name">
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

JS：

function ViewModel() {
    var self = this;
    self.name = ko.observable().extend({required: true});
};

ko.applyBindings(new ViewModel());

我也可以将它作为已注册的Knockout组件使用：http://jsfiddle.net/3y24zvLs/2/

HTML：

<name-component></name-component>

JS：

function ViewModel() {
    var self = this;
    self.name = ko.observable().extend({required: true});
};

ko.components.register('name-component', {
    viewModel: ViewModel,
    template: '<label>Name</label>\
                <input type="text" data-bind="value: name">\
                <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>'
});

ko.applyBindings();

但是，当我尝试使用捆绑验证中断时：

的index.html：

<!DOCTYPE html>
<head>
  <script src="Built/main.bundle.js"></script>
</head>
<body>
  <name-component></name-component>
</body>

main.js

var ko = require('../node_modules/knockout/build/output/knockout-latest');
var $ = require('jquery');
require('./ViewModel');

$(function(){
  ko.applyBindings();
})

ViewModel.js

"use strict";

var ko = require('../node_modules/knockout/build/output/knockout-latest');
var kv = require('../node_modules/knockout.validation/dist/knockout.validation');

function ViewModel() {
    var self = this;
    self.name = ko.observable().extend({required: true});
};

ko.components.register('name-component', {
    viewModel: ViewModel,
    template: '<label>Name</label>\
                <input type="text" data-bind="value: name">\
                <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>'
});

webpack.config.js

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


module.exports = {
  context: path.join(__dirname, 'App'),
  entry: './main.js',
  output: {
    path: path.join(__dirname, 'Built'),
    filename: '[name].bundle.js'
  },
  module: {
    loaders: [
      { test: /\.html$/, loader: 'html-loader'},
      { test: /\.js$/, loader: 'babel-loader'}
    ]
  }
};

有没有人知道为什么验证会破坏？ Knockout-Validation对WebPack不起作用吗？也许我应该尝试切换到使用Gulp或Grunt捆绑组件并使用RequireJS而不是WebPack / CommonJS？虽然我不完全确定开关会有多简单......

非常感谢任何帮助。

Answer 1

我想要解决这个问题，因为我刚刚解决了这个问题，但是今天早上我浪费了一些时间试图让它发挥作用，所以如果我把它留在这里以希望阻止其他人浪费时间。

我将jQuery，Knockout和Knockout-Validation移至全局范围，并删除了一些重新定义的问题。

<强>的index.html

<!DOCTYPE html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>
    <script src="Built/main.bundle.js"></script>
</head>
<body>
  <name-component></name-component>
</body>

<强> main.js

/*
  Knockout and jQuery were moved to the global scope. Knockout exports as 
  'ko' so there is no need to redefine it here.
*/

//var ko = require('../node_modules/knockout/build/output/knockout-latest');
//var $ = require('jquery');
require('./ViewModel');

$(function(){
  ko.applyBindings();
})

为了完整起见，这里有其他文件：

<强> ViewModel.js

"use strict";

function ViewModel() {
    var self = this;
    self.name = ko.observable().extend({required: true});
};

ko.components.register('name-component', {
    viewModel: ViewModel,
    template: '<label>Name</label>\
                <input type="text" data-bind="value: name">\
                <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>'
});

<强> webpack.config.js

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


module.exports = {
  context: path.join(__dirname, 'App'),
  entry: './main.js',
  output: {
    path: path.join(__dirname, 'Built'),
    filename: '[name].bundle.js'
  },
  module: {
    loaders: [
      { test: /\.html$/, loader: 'html-loader'},
      { test: /\.js$/, loader: 'babel-loader'}
    ]
  }
};

与WebPack捆绑时，Knockout验证中断

1 个答案: