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

悠悠 2022-05-17 01:59 177阅读 0赞

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][https_my.oschina.net_zaaksam_blog_1574629]

[https_my.oschina.net_zaaksam_blog_1574629]: https://my.oschina.net/zaaksam/blog/1574629