npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

aui-loader

v1.0.2

Published

用于webpack的aui组件解析

Downloads

23

Readme

关于

aui-loader是用于agile-ui框架内的aui-component的加载器

可以在webpack中自动化构建开发的工具,也可以在amd规范的requirejs中使用

agile-ui介绍和使用请查看https://github.com/nandy007/agile-ui

aui-loader可以将任意符合如下格式的aui后缀文件加载为webpack的模块:


	<ui>
	<!-- some html fragment -->
	</ui>
	
	<script>
	/*
	function Component(){
	}
	Component.prototype = {
	};
	Component.tag = 'componentName';
	module.exports = Component;
	*/
	</script>
	
	<style type="blank|less|sass">
	
	</style>

在webpack中使用

在webpack中使用时使用agile-cli已经内置调用,不需自己引入,只需要在webpack中配置即可

在requirejs中使用

在requirejs环境下使用,请拷贝dist文件夹在的aui.js文件到任意目录,且必须配置requirejs如下:


require.config({
	urlArgs: "r=" + (new Date()).getTime(),
    paths: {
    	'less': 'less',// 使用less时必须
    	'agile-ce': 'agile.ce.native.min',// 必须,https://github.com/nandy007/agile-ce
    	'agile-ui': 'agile.ui',// 必须,https://github.com/nandy007/agile-ui
    	'aui': '改名后的aui.js文件'//如果不改名则不需要配置,一旦改名请务必确保配置为aui
    }
});

如果style中使用其他css预处理,可以在首次引入aui-loader的时候使用addStyleHandler(name, handler(o, cb))函数加载。

其中:

  1. name为预处理的语言,也即style的type属性值;

  2. handler为处理函数,此函数会固定接受到两个参数,o为style标签的内容,cb为渲染处理后的结果回调,需要回调时固定传一个参数,即最终的style内容的回调

比如:

require(['aui'], function(loader){
	loader.addStyleHandler('sass', function(o, cb){
		// this指向的是requirejs的plugin的load回调函数的参数数组
		// 处理o,及原始的style标签的内容
		var renderContent = *****;
		cb(renderContent);
	});
});