2 Star 5 Fork 3

Zaaksam / koc-loader

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 1.47 KB
一键复制 编辑 原始数据 按行查看 历史
Zaaksam 提交于 2017-11-17 12:11 . add Chinese version document

koc-loader

Knockout component loader for webpack

中文说明示例

You can write component file like Vue:

hello.koc

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

<script lang="ts">
import ko from "knockout";

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

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

Webpack.config.js:

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

app.ts (app.js)

import ko from 'knockout'
import Hello from './hello.koc'

ko.components.register('hello', Hello)

ko.applyBindings()

index.html

<html>
    <body>
        <hello></hello>
    </body>
    <script src="http://host/app.js"></script>
</html>

koc.d.ts

/// <reference types="knockout" />

declare module "*.koc" {
    const koc: KnockoutComponentTypes.Config
    export default koc
}

Thanks:

NodeJS
1
https://gitee.com/zaaksam/koc-loader.git
git@gitee.com:zaaksam/koc-loader.git
zaaksam
koc-loader
koc-loader
master

搜索帮助