前言

在前端界MVVM框架高速发展中，各种工具链的完善和普及，作为MVVM鼻祖的Knockout（下称ko）在这波浪潮中却掉队了。其中，以国内优秀MVVM框架Vue为例，带来了单文件组件的新一波666操作，写起组件来爽快感爆棚。而受限于万恶的IE浏览器问题，我们并不能使用Vue来打造一切。那么，有没有办法像Vue单文件组件一样来写ko的组件呢？找了一圈，没有。本着开源分享精神，在基于vue-loader和san-loader的基础上，进行一些小改，撸了一个koc-loader，实现了类似Vue单文件组件的开发形式。

安装

yarn add koc-loader css-loader style-loader html-loader -D 

配置

因个人喜爱偏好，下述内容都是基于Typescript的代码演示。理论上支持script使用js、babel、coffeescript等loader组合

webpack.config.js

使用了ts-loader，请注意 entry 入口必须是 .ts 文件

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

koc.d.ts

需要定义 .koc 文件的声明

/// <reference types="knockout" />   declare module "*.koc" {     const koc: KnockoutComponentTypes.Config     export default 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> 

是不是很Vue？

koc工作机制

通过ko的d.ts文件定义，我们可以得知 ko.components.register 的方法定义：

register(componentName: string, config: KnockoutComponentTypes.Config | KnockoutComponentTypes.EmptyConfig): void; 

其中 KnockoutComponentTypes.Config 定义为：

interface Config {         viewModel?: ViewModelFunction | ViewModelSharedInstance | ViewModelFactoryFunction | AMDModule;         template: string | Node[]| DocumentFragment | TemplateElement | AMDModule;         synchronous?: boolean;     } 

example.koc 的示例代码中的script导出的实际上是 ViewModelFunction ，怎么能直接丢给 register 呢？

实际上，这里就是 koc-loader 的中间作用了，它会将script中导出的 viewModel 进行一个代码封装：

var Component = {     viewModel: function (params) {         return new __koc_script__(params)     },     template: __koc_template__ } module.exports = Component 

最终script部份导出的，就是一个符合 KnockoutComponentTypes.Config 定义的对象，perfect~~

注：params参数，请参照ko官网文档

进阶

使用index.ts实现默认导出

可以在 .koc 文件同名目录下，建立 index.ts 文件

import Menu from './menu.koc' export default Menu 

这样我们导入组件时，可以使用下面的更简短的方式：

import Menu from './src/component/menu'  ko.components.register('menu', Menu) 

更简洁的组件注册

通过上面的代码我们看到用 ko.components.register 比较罗嗦，这时Vue的组件注册形式又浮现出来，我们又马上撸了一个类似的形式：

kocHelper.ts

import ko from 'knockout' import _ from 'lodash'  interface Components {     [key: string]: KnockoutComponentTypes.Config | KnockoutComponentTypes.EmptyConfig }  export function Use(components: Components) {     for (let c in components) {         let name = _.kebabCase(c) //ko组件名称需要符合kebab-case          if (ko.components.isRegistered(name)) {             //同名组件已存在，跳过             continue         }          ko.components.register(name, components[c])     } } 

OK，现在我们就可以这么注册组件了：

import kocHelper from './kocHelper' import IMenu from './src/component/menu' let IMenu2 = IMenu let IMenu3 = IMenu  kocHelper.Use({     IMenu,     IMenu2,     IMenu3 }) 

结尾

ko最大的问题就是太老了，资源匮乏，但是因为众所周知的原因，我们还需要它，当然，今天我们可能有另一些新的选择，比如百度的san，但在我们离开之前，我们希望能让ko的开发更加有趣一些，这样也就满足了。

相关资源：

• Knockout官网文档-注册组件部份
• vue-loader
• san-loader