{"id":17300986,"url":"https://github.com/imtaotao/grass-loader","last_synced_at":"2026-02-07T16:31:29.471Z","repository":{"id":32917335,"uuid":"146151283","full_name":"imtaotao/grass-loader","owner":"imtaotao","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-10T01:04:16.000Z","size":1362,"stargazers_count":0,"open_issues_count":18,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-06T10:17:38.952Z","etag":null,"topics":["grass","loader"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imtaotao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-26T04:29:17.000Z","updated_at":"2021-06-19T06:37:53.000Z","dependencies_parsed_at":"2023-01-14T22:45:35.718Z","dependency_job_id":null,"html_url":"https://github.com/imtaotao/grass-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/imtaotao/grass-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imtaotao%2Fgrass-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imtaotao%2Fgrass-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imtaotao%2Fgrass-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imtaotao%2Fgrass-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imtaotao","download_url":"https://codeload.github.com/imtaotao/grass-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imtaotao%2Fgrass-loader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266567638,"owners_count":23949391,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grass","loader"],"created_at":"2024-10-15T11:31:37.105Z","updated_at":"2026-02-07T16:31:29.419Z","avatar_url":"https://github.com/imtaotao.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# grass-loader 用于编译 grass 模板\n\n## options\n|    属性    | Description | Type | Default |\n|------------|-------------|------|---------|\n| lib | 需要用到的 grass 库 | string | @rustle/grass |\n| needGrass  | 是否自动 import grass | boolean | false |\n\n## template 字符与注释\n用两种方法导出 template，通过注释的方式，会把需要的目标方法或字符串替换到特定的注释地方\n1. template method \u003cbr\u003e\n```js\n// #temp method\n/* #temp method */\n\n可以简写为：\n\n// #temp\n/* #temp */\n```\n\n2. template string \u003cbr\u003e\n```js\n// #temp string\n/* #temp string */\n```\n\ndemo：\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\u003c/div\u003e\n\u003ctemplate/\u003e\n\n\u003cscript\u003e\nexport default function C () {\n  return // #temp string\n}\n\u003c/script\u003e\n```\n\n## 阻止编译\n对于不想要参与编译的文件，可以通过 `// #no compile` 来阻止编译，但这行阻止编译的注释只能放在文件的最前面\u003cbr\u003e\ndemo：\n```js\n// #no compile\n...\n```\n\n## 几种 grass 文件的格式\n1. 一种为 `template` 和 `script` 标签都齐全的文件格式，这个时候 `template` 注释才有作用\n2. 如果只有 `template` 标签，那么这个标签会默认当成一个无状态组件，这个时候有两个属性供你使用，`name` 和 `styleSrc`\n```html\n\u003c!-- name 为组件的名称 --\u003e\n\u003c!-- styleSrc 为需要的 css 文件，需要开启 cssmodules, 这样就可以配合 grass 使用 styleName --\u003e\n\u003ctemplate name='cm' styleSrc='./style.css'\u003e\n  \u003cdiv styleName='xx'\u003e\u003c/div\u003e\n\u003c/template\u003e\n```\n3. 如果只有 `script` 标签，那么会作为纯 `js` 文件来处理，但，`needGrass` 配置同样生效\n4. 对于纯 `js` 文件， `template` 和 `script` 标签都不存在的情况下，会跳过编译，`needGrass` 配置将不会生效\n\n\n## 使用\ndemo：\n```js\n  {\n    test: /\\.grs$/,\n    use: [\n      {\n        loader: 'grass-loader',\n        options: {\n          needGrass: true,\n        },\n      },\n    ],\n    exclude: /node_modules/,\n  }\n```\n\n## 扩展\n多以可以在 `grs` 文件中获得 `template` 字符串，当然可以可以进行更改\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  const temp = (/* #temp string */)\n\n  changeTemplate(temp)\n\n  function changeTemplate (t) {\n    console.log(t)\n    ...\n  }\n\u003c/script\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimtaotao%2Fgrass-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimtaotao%2Fgrass-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimtaotao%2Fgrass-loader/lists"}