https://github.com/kingvid-chan/vm-loader
Exports .vm file as HTML String, also supports Separation between Data and Code.
https://github.com/kingvid-chan/vm-loader
loader velocity vm-migration webpack
Last synced: about 1 month ago
JSON representation
Exports .vm file as HTML String, also supports Separation between Data and Code.
- Host: GitHub
- URL: https://github.com/kingvid-chan/vm-loader
- Owner: kingvid-chan
- Created: 2017-01-05T17:02:01.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-23T14:38:30.000Z (about 9 years ago)
- Last Synced: 2025-10-17T05:45:18.553Z (8 months ago)
- Topics: loader, velocity, vm-migration, webpack
- Language: JavaScript
- Homepage:
- Size: 328 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
VM Loader
Exports .vm file as HTML String, also supports Separation between Data and Code.
安装
```bash
npm i -D vm-loader
```
用法
vm-loader能够解析velocity语法，转换成HTML并输出字符串给下一个loader。
支持本地模拟后台数据开发，数据文件会默认加入webpack dependency依赖树，当数据文件发生变动时，webpack-dev-server能监听到文件变动并自动刷新。
基于模块化规范，模块与数据是一对一的关系，即一个模块对应一份数据文件，数据文件划分为常规数据类型（number、string、array、object等）和函数数据类型两种，划分依据是函数数据一般是稳定不变的，而常规数据类型由于测试需要经常得做随机生成文本数字等操作（本地mock数据推荐使用[mockjs](http://mockjs.com/)），划分为两部分可以加快webpack编译速度，另一个考虑是数据文件以.json为格式存储的，而json是不能容下函数的，所以必须以.js文件格式来存放函数数据类型。
可配置options详情如下：
```
dataPath：模块的数据文件路径，可以是相对路径也可以是绝对路径，文件存放格式必须是json
funPath：模块的函数文件路径，可以是相对路径也可以是绝对路径，文件存放格式必须是js
```
e.g.
```js
{
test: /\.vm$/,
use: [
{
loader: "html-loader"
},
{
loader: 'vm-loader',
options: {
dataPath: './src/module1-data.json',
funPath: './src/common.js' // 函数数据文件最好整理到一份公共的js文件中
}
}
]
}
```
通过动态配置webpack将json数据文件hook到相应的模块中去
```js
// 默认所有的模块都在同一个目录下
// 默认json数据文件的命名和模块文件夹一致
// 假设所有模块数据都放在./src/mock/直接目录下
// eg：模块名称数组是：var modulesArr = ['header', 'body', 'footer'];
const webpack = require('webpack');
const webpack_config = require('./webpack.config');
const webpackDevServer = require('webpack-dev-server');
modulesArr.forEach((module) => {
webpack_config.module.rules.unshift({
test: eval("/\.vm$/i"),
include: eval(module),
use: [
{
loader: "html-loader"
},
{
loader: 'vm-loader',
options: {
dataPath: './src/mock/'+module+'.json',
funPath: './src/common.js' // 函数数据文件最好整理到一份公共的js文件中
}
}
]
});
});
//webpack dev server
const compiler = webpack(webpack_config);
new webpackDevServer(compiler, {
stats: {
colors: true,
chunks: false
},
noInfo: false,
proxy: {
'*': {
target: 'http://localhost:3000',
}
}
}).listen(8080, function(){console.log('App (dev) is now running on port 8080!');});
```