Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

loader

Package Overview
Dependencies
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

loader

Assets loader.

  • 2.1.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4.5K
decreased by-22.93%
Maintainers
1
Weekly downloads
 
Created
Source

loader Build Status Coverage Status

Node静态资源加载器。该模块通过两个步骤配合完成,代码部分根据环境生成标签。上线时,需要调用minify方法进行静态资源的合并和压缩。

Usage

Installation

$ npm install loader

Example

Controller:

res.render(tpl, {
  Loader: require('loader')
});

View:

<%- Loader("/assets/scripts/jqueryplugin.js", "/assets/styles/jqueryplugin.css")
  .js("/assets/scripts/lib/jquery.jmodal.js")
  .js("/assets/scripts/lib/jquery.mousewheel.js")
  .js("/assets/scripts/lib/jquery.tagsphere.js")
  .css("/assets/styles/jquery.autocomplate.css")
  .done(assetsMap, prefix, combo) %>

loader-builder/loader-connect/loader-koa的支持下,.js方法也可以加载.coffee.es类型的文件,.css方法可以加载.less.styl文件。

环境判别

环境判别由done方法的第三个参数决定,如果传入combo值,将决定选用线下版本还是线上版本。如果不传入第三个参数,将由环境变量。如下代码实现:

process.env.NODE_ENV === 'production'

如果不传入combo,需要设置环境,通过以下代码实现:

$ # 生产环境
$ export NODE_ENV="production"
$ # 开发环境
$ export NODE_ENV="dev"

可切换进example目录运行示例代码:

$ npm start

线上输出

线上模式将会输出合并和压缩后的地址,该地址从Loader构造参数中得到。

<script src="/assets/scripts/jqueryplugin.md5_hash.js"></script>
<link rel="stylesheet" href="/assets/styles/jqueryplugin.md5_hash.css" media="all" />

如果你有CDN地址,可以传入prefix参数,使得可以一键切换到CDN地址上,实现网络加速。以下为结果示例:

<script src="http://cnodejs.qiniudn.com/assets/scripts/jqueryplugin.md5_hash.js"></script>
<link rel="stylesheet" href="http://cnodejs.qiniudn.com/assets/styles/jqueryplugin.css" media="all" />

线下输出

线下模式输出为原始的文件地址。

<script src="/assets/scripts/lib/jquery.jmodal.js"></script>
<script src="/assets/scripts/lib/jquery.mousewheel.js"></script>
<script src="/assets/scripts/lib/jquery.tagsphere.js"></script>
<link rel="stylesheet" href="/assets/styles/jquery.autocomplate.css" media="all" />

构建

上文没有提及的重要值是assetsMap,这个值需要通过构建产生,类似如下格式:

{
  "/assets/index.min.js":"/assets/index.min.ecf8427e.js",
  "/assets/index.min.css":"/assets/index.min.f2fdeab1.css"
}

如果需要线上执行,需要该对象的传入。而该对象需要通过以下构建脚本(loader-builder)来生成:

$ builder <views_dir> <output_dir>
$ # 或者
$ ./node_modules/loader-builder/bin/builder <views_dir> <output_dir>

以上脚本将会遍历视图目录中寻找Loader().js().css().done()这样的标记,然后得到合并文件与实际文件的关系。如以上的assets/index.min.js文件并不一定需要真正存在,进行扫描构建后,会将相关的js文件进行编译和合并为一个文件。 并且根据文件内容进行md5取hash值,最终生成/assets/index.min.ecf8427e.js这样的文件。

遍历完目录后,将这些映射关系生成为assets.json文件,这个文件位于<output_dir>指定的目录下。使用时请正确引入该文件。具体请参见example目录下的代码示例。

流程

流程

API

请参见API文档

License

MIT license

Keywords

FAQs

Package last updated on 05 May 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc