技术控

    今日:58| 主题:49101
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] A Webpack Pattern Library

[复制链接]
素颜朝天 发表于 昨天 07:19
33 1

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
When web components finally do land the power is going to be in the    importelement and the ability to bring outside code into your page in a controlled manner. So, if you want to display a tabset you could    <link rel="import" href="tabset.html">and interact with that tabset through an exposed API such as,  
  1. <tabset>
  2.   <tab>
  3.     <tab-heading>Tab 1</tab-heading>
  4.     <p>This is my tab content!</p>
  5.   </tab>
  6.   <tab>
  7.     <tab-heading>Tab 2</tab-heading>
  8.     <p>This is my tab content!</p>
  9.   </tab>
  10. </tabset>
复制代码
With the above you'll get all the HTML, CSS, and Javascript necessary to turn our short markup into a fully functional, accessible, and styled tabset without ever having to worry about the underlying structure.
  However, here in the real world we're stuck with the browsers of the day for a few more years. But that doesn't mean we can't prepare ourselves for the upcoming web component craze. With that in mind I've been working with Webpack to abstract out my components into reusable chunks.
  The goal of my experimentation was to create a system that provided the same level of importability as web components. That way I could work with a tabset on its own and include it into whichever templates I needed to place it.
  Note: web components also offer a level of style isolation that I'll never achieve without browser support. So, as much as I'd love to experiment with style isolation today it's probably a frivolous battle until we get native support for shadow DOM.
  To get started I created a    webpack.config.js. Within, I was able to set up my dependencies and declare how Webpack would find everything. It looks like this,  
  1. var path = require('path');
  2. module.exports = {
  3.   entry: './index.js',
  4.   output: {
  5.     path: __dirname,
  6.     filename: 'bundle.js'
  7.   },
  8.   module: {
  9.     loaders: [
  10.       { test: /\.css$/, loader: 'style!css' },
  11.       { test: /\.handlebars$/, loader: 'handlebars-loader', query: {
  12.         'helperDirs': [path.join(__dirname, '/core/handlebars/helpers')]
  13.       } },
  14.       { test: /\.yaml$/, loader: 'json!yaml' },
  15.       { test: /\.md$/, loader: 'html!markdown!' }
  16.     ]
  17.   }
  18. };
复制代码
With that I could write CSS, HTML (in handlebars), data structures (in YAML), and documentation (in Markdown). This manifests itself into a folder structure such as,
  1. pattern-library
  2. |__ card.component
  3.     |__ card.css
  4.     |__ card.handlebars
  5.     |__ card.md
  6.     |__ card.yaml
  7. |__ hero.component
  8.     |__ hero.css
  9.     |__ hero.handlebars
  10.     |__ hero.md
  11.     |__ hero.yaml
复制代码
Now I have a    .componentthat can move around from project to project and when it moves all the necessary styles and documentation move with it. I also have a system that allows me to write    card.handlebarswith abstracted template tags that can be swapped on the fly. For example,  
  1. <div class="card">
  2.   <h1>{{ title }}</h1>
  3.   {{{ description }}}
  4. </div>
复制代码
And within    card.yamlI may have,  
  1. title: Card title description:
  2. This is the card description
复制代码
With these files setup the next step was to tie it all together. That's where our Webpack entry point comes into play. It does the hard work of fetching the CSS, rendering the Handlebars, and transforming the markdown.
  1. var component = 'card';
  2. require('./' + component + '.component/' + component + '.css');
  3. var patternDocs = require('./' + component + '.component/' + component + '.md');
  4. var patternData = require('./' + component + '.component/' + component + '.yaml') || {};
  5. var patternTemplate = require('./' + component + '.component/' + component + '.handlebars');
  6. var frame = require('./core/frame.handlebars');
  7. document.write(frame({
  8.   'patternName': component,
  9.   'patternDocs': patternDocs,
  10.   'patternMarkup': patternTemplate(patternData)
  11. }));
复制代码
You may have noticed    frameabove, all that's doing is organizing the dependencies onto the page for someone to see.  
  This is, maybe, 50% of what I want it to be but it's showing a lot of promise. I still need to manually adjust the    componentto change my view, something I'd prefer to do with a true router/pushState. Also we haven't done much to style the    frameyet but it's enough to visualize the shape it could take.  
  I've pushed the code to [GitHub](    https://github.com/happycog/webpack-patternlibrary) for anyone who's interested. It should serve as a good introduction to webpack as well as a boilerplate to get your own little pattern library going.
友荐云推荐




上一篇:10 key security terms devops ninjas need to know
下一篇:Gu #web #rendering-library
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

安靜做個小孩 发表于 昨天 14:00
有种帖子让我迷茫,有种回复让我欲罢不能
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表