blog
blog copied to clipboard
lcxfs1991
leehey's blog -- 请star或者watch
[原文链接](https://github.com/lcxfs1991/blog/issues/14) ## 打包一个模块 ``` javascript // webpack.config.js module.exports = { entry: { index: "./main.js", }, output: { path: __dirname + '/dist', filename: '[name].js' }, }; ``` ``` javascript // main.js,...
[原文地址](https://github.com/lcxfs1991/blog/issues/23)  昨晚，搞Babel翻译的李其昌微信我，说在掘金上看到云谦的这篇介绍一个新打包工具的文章：  我读了一遍后，再看了下项目文档。忽觉此打包工具让人眼前一亮。李其昌说不如搞一波翻译，说完他这边就买了个域名。 我看文档其实并不多，加上印记中文目前成熟的翻译规范，快速的工程化部署流程，感觉可以挑战下能否在24小时之内将文档翻译并部署出来。 结果，不到24小时，文档已经部署好了，临时地址在 [https://parceljs.docschina.org](https://parceljs.docschina.org)，刚买的域名也可以通过 [http://www.parceljs.io](http://www.parceljs.io)访问，不过可能有点慢。连核心成员之一的 James Kyle 都震惊了。  文档翻译完成，不过仍希望有意翻译的朋友可以继续参与后续的维护，以及帮助我们进行第一版本的校对。地址奉上：[https://github.com/docschina/parceljs.io](https://github.com/docschina/parceljs.io)。 印记中文希望有更多好的项目进驻，无论是前端、后台、客户端、AI等等，我们尊崇谁推动、谁负责、谁主导的原则，印记中文会作为你强大的服务器资源及工程化流程支持，助你更好地进行技术文档的翻译或者社区的搭建。 参考文章： [印记中文联合腾讯云推出文档CDN + COS部署方案](https://github.com/lcxfs1991/blog/issues/22) 我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan
## 简介 印记中文的成立主要是为了协助社区更好地翻译与部署文档。最近联合腾讯云一起设计了一套有效提升访问速度及降低流量消耗成本的方案，即 cos 对象存储服务 及 cdn 加速方案。本文主要描述方案大体的实现过程，如果你是技术文档的管理者，苦于没有优秀的文档部署方案，可以联系印记中文(docschina)，我们会提供接入服务。如果你遇到性能问题，我们也可以提供免费的技术咨询服务 ** QQ群：492361223 ** 也可以关注我们的公众号： ## 代码存放及CI构建 一般而言，对公有代码，一般采用 Github + Travis-CI 存放及构建方式。而对于私有代码来说，则会直接使用 Bitbucket + Pipeline (Bitbucket自有的构建服务)。（点击以下标题展开详细内容） Github + Travis-CI 自动构建与部署服务的架构如下图：  在代码仓库方面，我们需要两个分支，一个是...
前端跨域知识简介
## 前端跨域知识简介 ## 灵感 差不多2年前，由于业务需要，了解各种各样不同的跨域方式。但由于各种方式千奇百怪，我觉得有必要将各种方法封装起来，方便使用，弄了个简单的跨域使用库，里面包含各种跨域的使用函数，都存放在[steamer-cross v1.0分支里](https://github.com/SteamerTeam/steamer-cross/tree/v1.0)。但2年过后，IE8以下的浏览器已经逐渐淡出市场，基本上跨域的方案可以由postMessage一统天下，于是在[MessengerJS](https://github.com/biqing/MessengerJS)启发下，自己写了一个[steamer-cross v2.0版本](https://github.com/SteamerTeam/steamer-cross/tree/v2.0.0)，更灵活的用法，且兼顾父子窗口之间互相传递数据。 v1.0版本可能有bug，仅供学习参考，v2.0已写测试样例，可以`test`文件夹中看到，文档不清楚的地方，也可以参考`test/index.html`的写法。 本文主不会详细述说各种方法的具体实现，具体的办法可以点击后文参考资料里面的三篇文章。本文只会提及实现过程中的一些坑，以及框架的实现办法。具体的实现方法，可以参考[steamer-cross v1.0](https://github.com/SteamerTeam/steamer-cross/tree/v1.0)版本中的文件，各种办法的实现，可以看对应文件夹里面的文件。 ## 跨域方法 -- 单向 ### jsonp 这是最直观的办法，只需要一个页面，在页面内包含一个指向数据页面的script tag，然后在src后面多加一个回调函数即可以获取数据。 ### cross origin resource sharing (cors) 这个办法前后端都涉及，因此前端的同学需要后端的配合。其实质只是一个ajax，可以接收除了post和get之后的其它服务器请求例如put。后端需要修改的是.htaccess文件。加入以下一句 ``` Header set Access-Control-Allow-Origin *...
腾讯 Web 前端大会完美落幕。希望大家能收获满满干货。博主负责大会部份的讲师的遴选。虽然我全程都没怎么听（基本都在安排展位和发微博），但我希望通过选题的角度，以及PPT的内容，给大家分享一点思路和分享的导读。 ## TC39, ECMAScript, and the Future of JavaScript  第一位讲师是在 Elastic Search 工作的 Nicolas Bevacqua，他同时也是知名书作者和博主。 他所分享的这个主题，是跟W3C的标准制定相关。对于大神们说，这个知识都已经有所涉猎，但对于新入行几年的新人来说，可能相对陌生。Nicolas 出了与 ES6 有关的书籍，是这方面的专家，因此邀请他过来分享非常合适，也考虑到他是做英文分享，因此通过分享W3C标准制定流程、W3C标准的新特性这类知识性的分享，不会太艰涩难懂，但又对引起国内对W3C关注也起到一定的效果。毕竟国人在技术上，太过关注业务，大会还是希望通过引起大家对“标准”的关注，让越来越多的国人能花时间精力投身到“标准”的制定上去，比方说腾讯前端第一人“黄老师” Stone Huang 就是W3C中国信息无障碍社区组的主席。 本分享主要介绍的有，TC39是什么，以及他们制定规范的流程是怎么样的。关于这方面，我曾经阅读过一篇不错的介绍性文章[《JavaScript(ECMAScript) 语言标准历史及标准制定过程介绍》](https://itbilu.com/javascript/js/V1APADgrG.html)，我就不再赘述了。Nicolas 在分享的时候，只点到了TC39是制定标准的委员会，不过没提到的是其实每个开发者都有机会成为一份子。另外，从Stage 0 到...
## 背景： 1. 接手新项目，发现项目最基本的文件压缩没有，离线包有多余文件，md5也并没有做好， 2. 构建是用coffeescript写的，维护成本及交接成本大，关键的是，构建维护的人离职了 3. 作为新人，希望从头写一个构建，这样为以后独立开展项目获取经验 ## 页面情况： 手Q群成员分布页面。每天PV约260万，约60万人点击活跃群成员头像，点击申请加群14万人，转化率约5%。 示例连接，需要QQ登录态，可到腾讯网门户进行登录: [链接](http://web.qun.qq.com/statistics/index.html?_bid=149&_wv=3&gc=60478266&sid=AXR5hz1VViG-63A40b8vK4FB)  ## 目标： 1. 对文件进行压缩 2. 删除离线包冗余文件，精简大小 3. 对文件名md5化 ## 成果： ### 1. 构建工具搭建的思路及原则总结...
`requirejs` 算是几年前一个比较经典的模块加载方案(AMD的代表)。虽然不曾用过，但它对 `webpack`, `rollup` 这些后起之秀有不少借鉴的意义，因此也决定大体分析一下它的源码进行学习。 # 整体结构 requirejs 首先定义了一些基本的全局变量（在requirejs自执行函数里的全局），比方说版本号，对运行环境的判断、特殊浏览器(Opera)的判断等。 其次，是定义了一系列的 `util 函数，如类型判断、迭代器、`对象属性判断、Mixin（掺合函数）等等。（个人感觉这些函数在版本的浏览器都有，但这里定义主要是有兼容性的考虑）。 接下来出现下面几个判断，主要是判断 `define`, `requirejs`, `require` 三个关键函数是否已经被定义，如果已经被定义，则不进行重写。 ```javascript if (typeof define !== 'undefined') { //If a define is already in...
## 项目： 手Q群成员分布直出 ## 原因： - 为家校群业务直出做准备 - 群成员分布业务是小型业务，而且逻辑相当简单，方便做直出试验田 ## 基本概念： 直出其实并不算是新概念。只不过在Web2.0单页应用流行的年代，一直被人遗忘在身后。其实在Web1.0时代，前后端没有分离的时候，程序员直接用后台程序渲染出模板，这便是直出。而到了今天，当Node大大提高了前端开发者的能力时，前端人员也可以做一些后台的事情，通过Node来实现模板的渲染和数据的吞吐。 ## 框架及技术： 由AlloyTeam开发的，建基于Koa之上的玄武直出框架。该框架的优势在于： (1) 安装与本地开发简单：只需要几行命令安装和几行代码部署本地开发环境。 (2) 完善的文档和规范的开发实践：经过数个项目的试验，文档已经日臻完善，并总结出一套可供大部份业务使用的实践方案。 (3) 部署测试和发布成熟：目前已有兴趣部落、群搜索等数个项目成功发布。 (4) 较好的容错功能： 通过公司的L5负载均衡服务，完美兼容直出与非直出版本，即使直出挂了，也能顺利走非直出版本，让前端可以安心睡大觉。 ## 直出方案： ### 1. 数据拉取 玄武框架提供一个封装了开源request库的一个同名request框架，并且提供异步拉取数据方案。文档代码如下：...
## Overview Some friends and I have been running [webpack-china](https://github.com/webpack-china) for a few months. After a few months effort, most [doc translation](https://doc.webpack-china.org/) job have also been done. We keep tracking...
## 前言 本文不是webpack入门文章，如果对webpack还不了解，请前往题叶的[Webpack入门](http://segmentfault.com/a/1190000002551952)，或者阮老师的[Webpack-Demos](https://github.com/ruanyf/webpack-demos)。 ## 为什么要使用Webpack 1. 与react一类模块化开发的框架搭配着用比较好。 2. 属于配置型的构建工具，比较用容易上手，160行代码可大致实现gulp400行才能实现的功能。 3. webpack使用内存来对构建内容进行缓存，构建过程中会比较快。 第3点我想稍微论述一下，如果看过我之前写的[《如何写一个webpack插件（一）》](https://github.com/lcxfs1991/blog/issues/1)，会发现，webpack会将文件内容存在compilation这个大的object里面，方便各种插件，loader间的调用。虽然gulp也用到了流(pipe)这样的内存处理方式，但感觉webpack更进一步。gulp是每一个任务(task)用一个流，而webpack是共享一个流。 ## 简要回顾Webpack的配置  Webpack的配置主要为了这几大项目： - entry：js入口源文件 - output：生成文件 - module：进行字符串的处理 - resolve：文件路径的指向 - plugins：插件，比loader更强大，能使用更多webpack的api ## 常用Loaders介绍 - 处理样式，转成css，如：less-loader,...