前端

搞定 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
吕立青

关于前端的思考:Angular 2.0以及前后端边界

前端的学习曲线 每个人在学 AngularJS 的时候都会觉得Angular 1.x自创的概念实在太多,学习曲线也因此变得非常陡峭。但对于一个完整的前端项目来说,所需要的东西本来就不够简单,而 AngularJS 作为一款大而全框架,自带一揽子解决方案,只要学习上手之后还是会有一劳永逸的感觉。就像 Python 的 web 框架代表 Django 和 Flask 一样,萝卜白菜各有所爱,轻量级框架所带来的灵活性固然很棒,但对于新手来说依旧会很容易玩脱。就像当前所兴起的 React 大潮,暂且不讨论深度玩家所表现的态度和看法,就论一个前端新手所面临的问题,在没有主见的时候到底该师从何派? 对于前端刚入门的我来说,依旧会推荐从一个大而全的框架开始学起,一个好的框架不但会强制你不犯错误,由此带来的「配置大于约定」也会让一个还没有能力进行约定的能力去学习如何约定。当你学有所成的时候自然会似脱缰一般出去闯荡一番。就像当初青春期的我们,在蜕变之前我们安定得学习该有的技能,当有了一定资本之后就开始自我思考,决定去走自己的路。 反过来说,其实走自己的路,又何尝不是陡峭的呢?对于 React 来说
吕立青