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

MIT
JavaScript 查看源码»
跨平台
2017-11-19
Zaaksam

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

的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

前端技术之:常用webpack插件

1、html-webpack-plugin Simplifies creation of HTML files to serve your webpack bundles. 主页地址: https://github.com/jantimon/html-webpack-plugin 安装方法: npm i --save-dev h...

10/16 08:26
20
0
自己手动开发一个Webpack Loader

webpack的使用离不开loader,搞清楚loader的基本运行原理能有效的让我们搞清楚webpack的整体工作流程。 开发 Webpack Loader 前须知 Loader 是支持链式执行的,如处理 sass 文件的 loader,可...

01/14 14:45
3
0
webpack CSS LESS

官网 https://webpack.docschina.org/loaders/postcss-loader/ css 打包 分离 安装 npm install --save-dev extract-text-webpack-plugin 引入 const ExtractTextPlugin = require('extract...

2018/09/14 09:42
7
0
webpack 静态资源集中输出的方法示例

目录结构 copy-webpack-plugin 工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图、开发文档),这些静态资源有可能是文档,也有可能是一些额外的图片。打包...

01/15 19:54
33
0
纯css loadding效果

***原文地址: *** >https://blog.csdn.net/zuncle/article/details/62887308 html <h1> CSS LOADERS </h1> <div class="box"> loader-01 <div class="loader-01"> </div> </div> <div clas...

2018/10/30 09:52
16
0
从0搭建自己的webpack开发环境(二)

loader主要是用于把模块原内容按照需求转换成新内容,以便用来加载非 JS 模块! 通过使用不同的loader,Webpack可以把不同的文件都转成JS文件,比如CSS、ES6/7、JSX等。 让我们来看看这些必须...

09/18 17:47
16
0
Android Loader 官方教程翻译

Loaders 目录 1. Loader API 简介 2. 在应用中使用Loader 1. 启动一个Loader 2. 重启一个Loader 3. 使用Loader管理器LoaderManager 的回调方法 3. 实例 1. 更多实例 主类 1. LoaderManager 2...

2014/01/17 19:29
283
0
Webpack4教程 - 第二部分,使用loader处理scss,图片以及转换JS

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://wanago.io/2018/07/16/webpack-4-course-part-two-webpack-4-course-par...

2018/09/12 11:36
175
0
webpack配置: 如何同时使用ES2015和JSX

笔记笔记,网上很多例子都是过期的啊= = 因为jsx转换器整合到babel中了,根本不需要网上所说的jsx-loader ``` sudo npm install webpack webpack-dev-server babel -g sudo npm install react ...

2016/04/05 17:24
651
2
webpack之loader篇

一、loaders之 预处理 css-loader 处理css中路径引用等问题 style-loader 动态把样式写入css sass-loader scss编译器 less-loader less编译器 postcss-loader scss再处理 npm install --save...

2016/10/19 14:40
8
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部