用于 webpack 的 Knockout 组件加载器 koc-loader

koc-loader 详细介绍

koc-loader 是一个 webpack loader，可以使用类似 Vue 单文件组件的风格来编写和使用 Knockout 组件。

代码上基于 vue-loader、san-loader 进行编写，支持各种其他 loader 组件的搭配使用。

使用 yarn 或 npm 安装

yarn add koc-loader -D

webpack配置示例（这里使用了ts）

{
    resolve: {
        extensions: ['.ts', '.js', '.koc']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                    appendTsSuffixTo: [/\.koc$/]
                }
            },
            {
                test: /\.koc$/,
                loader: 'koc-loader'
            }
        ]
}

example.koc

<template>
    <div>
        <div data-bind="text: info"></div>
        <menu></menu>
    </div>
</template>

<script lang="ts">
import ko from 'knockout';
import Menu from "./src/component/menu/menu.koc"; //加载其他ko组件

ko.components.register('menu', Menu);

export default class viewModel {
  info: KnockoutObservable<string>;

  constructor(params: any) {
    this.info = ko.observable("hello koc-loader");
  }
}
</script>

更详细的使用信息，可以查看：https://my.oschina.net/zaaksam/blog/1574629