写得最清楚的是这个系列: 一个普通的写网页的人如何过渡到ES6 (一) 感觉比babel官网写得还清楚点. 看完这个才有点理解node原来不只是用来起express后端web server,更主要用途是作为开发时,用npm作为js语言的包管理器,然后打包,管理浏览器端<script>字段的js.有了npm+打包工具:写程序时 按包.模块,文件夹,单元测试这样写,然后打包成1个文件,供浏览器下载运行. 而不是在html手写一堆<script></script>,还要考虑先

Browserify:浏览器加载Node.js模块--------------------------------------------------随着JavaScript程序逐渐模块化,在ECMAScript 6推出官方的模块处理方案之前,有两种方案在实践中广泛采用:一种是AMD模块规范,针对模块的异步加载,主要用于浏览器端:另一种是CommonJS规范,针对模块的同步加载,主要用于服务器端,即node.js环境. Browserify是一个node.js模块,主要用于改写现有的Common

使用Browserify打包js时如果项目变得越来越大,编译时间就会相应变得越来越长.使用官方的插件watchify是个比较有效的提高速度方案. 提速原理 watchify的用法和gulp的watch方法比较类似,都是监控文件的改动来触发一些操作.在gulp中我们可以把一个完整的任务拆分成很多个局部任务,然后使用gulp.watch对这些局部任务进行监听,例如: gulp.task('build-js1', ...); gulp.task('build-js2', ...); gulp.task

简介 这篇文档用以说明如何使用browserify来构建模块化应用 browserify是一个编译工具,通过它可以在浏览器环境下像nodejs一样使用遵循commonjs规范的模块化编程. 你可以使用browserify来组织代码,也可以使用第三方模块,不需要会nodejs,只需要用到node来编译,用到npm来安装包. browserify模块化的用法和node是一样的,所以npm上那些原本仅仅用于node环境的包,在浏览器环境里也一样能用. 现在npm上有越来越多的包,在设计的时候就是想好既

webpack算是个磨人的小妖精了.之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下.本来只想玩一下的.尝试打包了以后,就想启个webpack服务器,之后就想添加热替换,什么css文件单独拆分,各种 loader 处理优化打包结果,各种 source-map 有什么不同,一个都不能少.其中添加热替换时候,因为应用的服务器和webpack服务器没有使用同一个,产生了一点波折.然后就到了今天这个主题了. 逐步展开今天的主题:

随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6(ECMAScript 2015)前端项目,网上的相关教程也比较多:相对来说使用gulp来构建es6项目的中文教程就比较少. 经过一段时间的摸索,我觉得其实使用gulp也可以很方便地构建es6项目.以下是我感觉gulp和webpack主要的不同之处: gulp的任务机制和流式管道函数和webpack的

webpack算是个磨人的小妖精了.之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下.本来只想玩一下的.尝试打包了以后,就想启个webpack服务器,之后就想添加热替换,什么css文件单独拆分,各种 loader 处理优化打包结果,各种 source-map 有什么不同,一个都不能少.其中添加热替换时候,因为应用的服务器和webpack服务器没有使用同一个,产生了一点波折.然后就到了今天这个主题了. 逐步展开今天的主题:

让浏览器加载Nodejs模块 目前NPM上有二十多万个NodeJS模块,它们都是通过CMD的方式打包的,除了特定的可以使用CMD模块加载器加载的模块,大部分nodejs模块无法直接使用到浏览器环境中. Browserify是一个供浏览器环境使用的模块打包工具,像在node环境一样,也是通过require('modules')来组织模块之间的引用和依赖,既可以引用npm中的模块,也可以引用自己写的模块,然后打包成js文件,再在页面中通过<script>标签加载. 当然对于很多NodeJS模块,比

本文来自网易云社区 作者:孙圣翔 注意 文章需要边看边练习,不然你可能忘得速度比看的还快. 原文地址: http://my.oschina.net/goskyblue/blog/552284 Browserify browserify的官网是http://browserify.org/,他的用途是将前端用到的众多资源(css,img,js,...) 打包成一个js文件的技术. 比如在html中引用外部资源的时候,原来我们可能这样写   <script src="/static/libs/l

前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp.task(name[,deps],fn); gulp.watch(glob[,opts],tasks) gulp一些常用插件 gulp-rename(重命名) gulp-uglify(JS压缩) gulp-minify-css(css文件压缩) gulp-minify-html(html压缩) gu

Flv.js 是 HTML5 Flash 视频(FLV)播放器,纯原生 JavaScript 开发,没有用到 Flash.由 bilibili 网站开源. 该项目依托于 Media Source Extensions,受到 hls.js 的启发. 概览: 一个实现了在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库.它的工作原理是将 FLV 文件流转码复用成 ISO BMFF(MP4 碎片)片段,然后通过 Media Source Extensions 将 MP4 片段喂进

[导读]:GitHub 上有一个 Awesome – XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模板引擎.数据可视化.时间轴.编辑器等等. 伯乐在线已在 GitHub 上发起「JavaScript 资源大全中文版」的整理.欢迎扩散.欢迎加入. https://github.com/jobbole/awesome-javascript-cn 包管理器 管理着 ja

请注意,这是一篇站在完全新手的角度上来写的文章.可能你是一个后端人员想了解前端工具的使用和概念;也可能你是一个前端小菜(还在DIV+CSS的世界里挣扎着).本文比较适合那些以前完全没有接触过WebPack,而又想使用的朋友.通过本文你能理解webPack工作原理及做用!(不会至于看了半天资料还没有头绪!) 前言:本人是一个从后端转向前端的程序猿,在此之前对于前端的印象一直是:HTML + CSS + JS.完全没有想过前端会发展的如此的迅速,各种名词的出现:Node.NPM.Grunt.Gulp

VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calen

(背景: 先用 babel 转译 es6 再 用 browserify 打包 模块化文件,来解决浏览器不支持模块化 )(Browserify是一个让node模块可以用在浏览器中的神奇工具) 今天折腾了一上午,对于前端好多自动化管理的命令用起来,步骤甚多,故想写一个脚本文件,将项目所需要执行到命令 都 写在一个脚本文件中,在命令行 只需写一个命令即 完成所有事情.配置的环境: node + git1.第一步:在项目根目录下 新建 package.json 配置文件 { "name": &

伯乐在线已在 GitHub 上发起「JavaScript 资源大全中文版」的整理.欢迎扩散.欢迎加入. https://github.com/jobbole/awesome-javascript-cn js包下载地址:http://www.quzhuanpan.com/download/checkResult.action?id=52&type=6 包管理器 管理着 javascript 库,并提供读取和打包它们的工具. •npm – npm 是 javascript 的包管理器. •Bower

CommonJS 该规范的核心思想是允许模块通过 require 方法来同步加载所要依赖的其他模块,然后通过 exports 或 module.exports 来导出需要暴露的接口 require("module"); require("../file.js"); exports.doStuff = function() {}; module.exports = someValue; 优点: 服务器端模块便于重用 NPM 中已经有将近20万个可以使用模块包 简单并容

前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单介绍. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + vuex + es6 + browserify. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - l

function () use ($x, &$y){} 自从PHP5.3开始有了closure/匿名函数的概念,在这里的use关键词的作用是允许匿名函数capture到父函数scope 内存在的$x和$y变量.其中&&y为引用方式capture,也就是说每次该匿名函数调用时,y的值如果 被修改了也反映在这里,而$x则是静态引用. <?php $message = "hello\n"; $example = function () { echo $messa