初识前端模板概念的开发者,通常都使用过underscore的template方法,非常简单好用,支持赋值,条件判断,循环等,基本可以满足我们的需求。
在使用Webpack搭建开发环境的时候,如果要使用underscore的template方法进行前端模板的渲染,我们可以把模板代码独立到模版文件中保存。如何将模板文件加载到我们的JavaScript中进行模板渲染,就成了我们首先需要解决的问题。
说道这里,就必须提到Webpack中的loader(加载器)的概念,webpack支持通过loader的方式转换应用程序的资源文件,而我们的模板文件也需要对应的loader去进行加载,才能支持我们开发。
segmentfault中leftstick讲到目前可以支持template加载的有raw-loader,html-loader,template-html-loader,ejs-loader。。。。。。【更多的列表参考templating】
不同的加载器略有不同,表现在加载完之后,在JS代码中的表现,有的是返回字符串,有的则是JS对象或方法。
我们尝试使用raw-loader来处理,raw-loader的官方解释是【将文件加载为字符串】,因此我们可以将模板文件加载成字符串,然后使用underscore去渲染成最终的HTML。
我们使用一下配置简单构建一个webpack的环境。
package.json
{ "name": "tpl-webpack", "version": "1.0.0", "description": "", "main": "index.js?1.1.10", "scripts": {"test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": {"html-webpack-plugin": "^2.28.0","raw-loader": "^0.5.1","underscore": "^1.8.3","webpack": "^3.0.0" } }
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './index.js', output: { filename: 'bundle.js'}, module: { loaders:[ { test: /\.tpl$/, use: 'raw-loader'} ] }, plugins: [new HtmlWebpackPlugin()] };
模板代码 index.tpl
<% _.each(data, function(n){ %><p>姓名:<%= n.name %>,年龄:<%= n.age %>,性别:<%= n.sex %></p><% }); %>
index.js
1 var _ = require('underscore'); 2 3 // 这里可以看到indexTplFile只是字符串 4 var indexTplStr = require('./index.tpl'); 5 // template方法将其封装成一个方法 6 var indexTpl = _.template(indexTplStr); 7 8 var data = [ 9 {10 name: 'mike',11 age: 18,12 sex: '男'13 },14 {15 name: 'nina',16 age: 20,17 sex: '女'18 },19 {20 name: 'elle',21 age: 26,22 sex: '女'23 }24 ]; 25 26 document.body.innerHTML = indexTpl({data:data});
运行npm install 之后,运行webpack,打开index.html,就可以看到如下结果。
姓名:mike,年龄:18,性别:男 姓名:nina,年龄:20,性别:女 姓名:elle,年龄:26,性别:女
但是可以看得出来,在渲染模板的过程中,执行了三行代码,如果我们想只用一行代码就生成最终的HTML字符串,继续尝试ejs-loader 。
webpack.config.js
1 var webpack = require('webpack'); 2 var HtmlWebpackPlugin = require('html-webpack-plugin'); 3 module.exports = { 4 entry: './index.js', 5 output: { 6 filename: 'bundle.js' 7 }, 8 module: { 9 loaders:[ 10 { 11 test: /\.tpl$/, 12 loader: 'ejs-loader?variable=data'13 },14 ]15 }, 16 plugins: [ 17 new HtmlWebpackPlugin(),18 // 提供全局变量_19 new webpack.ProvidePlugin({20 _: "underscore"21 })22 ]23 };
在代码中使用也变得非常简单,require对应的tpl文件之后,直接就可以渲染对应的html模板。
var indexTpl = require('./index.tpl'); document.body.innerHTML = indexTpl(data);
通过raw-loader和ejs-loader的对比,我们可以对webpack的loader使用有了一些认识,那就是loader是将不同类型的文件通过某种解析方式模块化到我们的代码中,然后提供给Javascript进一步的处理。
以上是webpack之loader实践的详细内容。更多信息请关注PHP中文网其他相关文章!