webpack 插件:string-loader
发布于 9 年前 作者 enmoon 10225 次预览 最后一次回复是 9 年前 来自 分享
string loader for webpack
webpack 插件:把任意的资源文件打包成可require的字符串模板
Installation
npm install string-loader --save-dev
Usage
webpack.config 配置
loaders: [ { test: /\.[name]$/, loader: "string" } ]
示例 1: 把html转换为字符串模板,以便模板引擎使用
webpack.config
loaders: [ { test: /\tpl\.html$/, loader: "string" } ]
list.tpl.html
<ul>
<% for(var i in list){ %>
<li><%= list[i].text %></li>
<% } %>
</ul>
list.js
var Template = require('template'),
TPL = require('./list.tpl.html');
var html = Template(TPL, [
{
text: 'option1'
},
{
text: 'option2'
}
]);
console.log(html); //html: '<ul><li>option1</li><li>option2</li></ul>'
示例 2: 把json数据转换为字符串
webpack.config
loaders: [ { test: /\.html|\.json$/, loader: "string" } ]
data.json
[
{
"text": "first",
"value": "first"
},
{
"text": "second",
"value": "second"
}
]
index.js
var str = require('./data');
var json = JSON.parse(str);
console.log(json); //json: [{"text": "first","value": "first"},{"text": "second","value": "second"}]
<br /> 参考:
4 回复
json转字符串 为什么不直接使用 JSON.stringify(json) ?
@yuanzhhh 这是展示怎么把单独文件打包成可require的字符串模板,一般是配合模板引擎,把JS中的view分离成单个文件,独立引用渲染,分层解耦代码结构,当然也可以干点其它的
哈哈,这感觉就像是把
fs.readFileSync封进了 require 的功能里。其实放弃 require 这个名字的话,这个库做的事情用
fs.readFileSync可以轻易做到。@alsotang 是的,很简单,开发中可以像include调用需要的资源