https://github.com/zaaksam/koc-loader

Knockout component loader for webpack
https://github.com/zaaksam/koc-loader

knockout webpack-loader

Last synced: 5 months ago
JSON representation

Knockout component loader for webpack

• Host: GitHub
• URL: https://github.com/zaaksam/koc-loader
• Owner: zaaksam
• License: mit
• Created: 2017-11-15T15:20:29.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-11-17T06:39:41.000Z (over 8 years ago)
• Last Synced: 2025-05-08T19:16:07.430Z (about 1 year ago)
• Topics: knockout, webpack-loader
• Language: JavaScript
• Size: 24.4 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# koc-loader

Knockout component loader for webpack

[中文说明示例](https://my.oschina.net/zaaksam/blog/1574629)

You can write component file like Vue:

hello.koc

```html

    


import ko from "knockout";

export default class Component {

    info: KnockoutObservable<string>;

    constructor(params: any) {

        this.info = ko.observable("hello koc-loader");

    }

}

```

Webpack.config.js:

```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)

```ts

import ko from 'knockout'

import Hello from './hello.koc'

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

ko.applyBindings()

```

index.html

```html

    

        

    

    

```

koc.d.ts

```ts

/// 

declare module "*.koc" {

    const koc: KnockoutComponentTypes.Config

    export default koc

}

```

Thanks:

* [san-loader](https://github.com/ecomfe/san-loader)

* [vue-loader](https://github.com/vuejs/vue-loader)