Sign in Subscribe

Latest

搞定 Webpack (2)：使用 Webpack 大幅提升前端开发体验

安装，运行，热加载 首先当然是安装，当然是使用更加符合中国社会主义国情的 CNPM 来安装，道理大家都懂的。 cnpm install webpack webpack-dev-server -g webpack-dev-server 是一个基于 Express.js 框架的静态资源 Web 服务器，对于简单静态页面或者仅依赖于独立服务的前端页面，都可以直接使用这个开发服务器进行开发。在开发过程中，开发服务器会监听每一个文件的变化，进行实时打包，并且可以推送通知前端页面代码发生了变化，从而可以实现页面的自动刷新。 在项目根目录下添加最基本的 webpack.config.js 配置文件，运行 Webpack 时则会默认加载该文件内的配置。如果要指定另外的配置文件，可以执行：webpack --config webpack.custom.config.js，进阶的用法就是在不同环境下，可以通过 Script 指定不同的 Webpack 打包策略。代码热加载功能当然也必不可少，
吕立青

搞定 Webpack (1)：前端模块化实践小史与 Webpack 入门

JavaScript 模块化管理 未来即现在：ES6 模块 via 《ECMAScript 6 入门》 —— 阮一峰： 历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的 require、Python 的 import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。 在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的
吕立青

升级 AngularJS 1.5：新特性对比与最佳实践

图谋不轨：帮助（勾引）开发者过渡到 Angular 2.0 私以为，本次更新最重要的两个部分就是 angular.component() 方法和支持了 Multi-slot 的 transclusion： * 组件与 angular.component() 方法： 首先最大的一个变化就是引入了组件的概念，并新增了 angular.component() 方法。经过这么长时间的摸爬滚打，Angular 社区乃至整个前端领域也慢慢地总结出了符合实际项目开发的最佳实践，其中最大的一个共识就是组件化，在 Angular 1.x 中我们就已经可以通过元素指令的方式定义可复用的组件，而其实 Components 就是一种特别的元素指令，通过自定义的 HTML 元素将之激活。 本次更新的 .component() 方法其实就是一种更加方便定义元素指令的方式，并自带默认配置使之符合最佳实践。而组件开发的方式也就使应用更加符合 Angular 2.0 的架构风格，所以说，Angular
吕立青

【译】展望2016，React.js 最佳实践

React.js 作为前端框架的后起之秀，却在 2015 年携着虚拟 DOM，组件化，单向数据流等利器，给前端 UI 构建掀起了一波声势浩大的函数式新潮流。新鲜出炉的一篇 React.js 最佳实践，基本涵盖了所有的 React.js 生态周边，可用于实践参考。文章不仅表明了 Flux 经常被滥用的观点，也推荐开发者使用 Redux 作为 JavaScript 的可预测状态容器，并且提出保持状态扁平化和使用 Immutable.js 等数据处理解决方案。与此同时，也从高阶组件，组件测试以及组件级别热重载等方面提供了建议，当然也涉及了 Webpack，HTTP 2，使用 ES2015 乃至 Linters 等代码层面的建议。 【译】展望 2016，React.js
吕立青