❤
npm
Sign UpSign In

velocity-render-loader

0.2.6 • Public • Published

Velocity Render Loader

在webpack中使用Velocity.js解析vm模板，支持#parse指令。

Install

npm install --save-dev velocity-render-loader html-loader

Usage

首先在webpack配置中匹配规则

module: {
  rules: [
    {
      test: /\.vm$/,
      use:[
        {
          loader: 'html-loader'
        },
        {
          loader: 'velocity-render-loader'
        }
      ]
    }
  ]
}

自动生成html文件

new HtmlWebpackPlugin({
  filename: 'a.html',
  template: '/path/to/a.vm', 
  inject: true
}

velocity-render-loader会自动读取vm文件旁的同名mock文件，假设结构如下

=====================
- src
  - modules
    - a
      - a.vm
      - a.mock.js
  - shared
    - components
      - header
        - header.vtl
======================

在mock中定义变量并通过模块暴露出来

//a.mock.js
module.exports = {
  title : "Hello World!"
}

在vm中使用变量

<!--a.vm-->
 
<!--编译前-->
<head>
  <title>$title</title>
</head>
 
<!--编译后-->
<head>
  <title>Hello World!</title>
</head>

更多支持的指令见 https://github.com/shepherdwind/velocity.js

Options

options: {
  basePath: path.join(__dirname, 'src')
}

配置项:

  • basePath: 定义#parse指令中绝对路径的起始位置

      #parse("/shared/components/header/header.vtl")

    在某些情况下，后端渲染vm时的相对路径与前端环境不同。最好使用绝对路径来查找文件位置。

  • compileVm: 是否开启vm解析器，默认为true

  • compileEjs: 是否开启ejs解析器，默认为false

  • removeComments 是否去除vm注释，默认为false

    删除vm注释后，可以使用html-minifier等工具进行压缩

Readme

Keywords

Package Sidebar

Install

npm i velocity-render-loader

Weekly Downloads

0

Version

0.2.6

License

MIT

Unpacked Size

4.7 kB

Total Files

3

Last publish

Collaborators

  • devinyuan
Try on RunKit
Report malware