https://github.com/imtaotao/grass-loader
https://github.com/imtaotao/grass-loader
grass loader
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/imtaotao/grass-loader
- Owner: imtaotao
- Created: 2018-08-26T04:29:17.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T01:04:16.000Z (over 3 years ago)
- Last Synced: 2025-04-06T10:17:38.952Z (over 1 year ago)
- Topics: grass, loader
- Language: JavaScript
- Size: 1.3 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# grass-loader 用于编译 grass 模板
## options
| 属性 | Description | Type | Default |
|------------|-------------|------|---------|
| lib | 需要用到的 grass 库 | string | @rustle/grass |
| needGrass | 是否自动 import grass | boolean | false |
## template 字符与注释
用两种方法导出 template，通过注释的方式，会把需要的目标方法或字符串替换到特定的注释地方
1. template method
```js
// #temp method
/* #temp method */
可以简写为：
// #temp
/* #temp */
```
2. template string
```js
// #temp string
/* #temp string */
```
demo：
```html
export default function C () {
return // #temp string
}
```
## 阻止编译
对于不想要参与编译的文件，可以通过 `// #no compile` 来阻止编译，但这行阻止编译的注释只能放在文件的最前面
demo：
```js
// #no compile
...
```
## 几种 grass 文件的格式
1. 一种为 `template` 和 `script` 标签都齐全的文件格式，这个时候 `template` 注释才有作用
2. 如果只有 `template` 标签，那么这个标签会默认当成一个无状态组件，这个时候有两个属性供你使用，`name` 和 `styleSrc`
```html
```
3. 如果只有 `script` 标签，那么会作为纯 `js` 文件来处理，但，`needGrass` 配置同样生效
4. 对于纯 `js` 文件， `template` 和 `script` 标签都不存在的情况下，会跳过编译，`needGrass` 配置将不会生效
## 使用
demo：
```js
{
test: /\.grs$/,
use: [
{
loader: 'grass-loader',
options: {
needGrass: true,
},
},
],
exclude: /node_modules/,
}
```
## 扩展
多以可以在 `grs` 文件中获得 `template` 字符串，当然可以可以进行更改
```html
const temp = (/* #temp string */)
changeTemplate(temp)
function changeTemplate (t) {
console.log(t)
...
}
```