js构建工具和预编译

Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧。Gulp / Grunt 是一种工具,能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说,就是使用Gulp/Grunt,然后配置你需要的插件,就可以把以前需要手工做的事情让它帮你做了。

说到 browserify / webpack ,那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型,browserify / webpack 是另一种类型。

seajs / require : 是一种在线"编译" 模块的方案,相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。

browserify / webpack : 是一个预编译模块的方案,相比于上面 ,这个方案更加智能。没用过browserify,这里以webpack为例。首先,它是预编译的,不需要在浏览器中加载解释器。另外,你在本地直接写JS,不管是 AMD / CMD / ES6 风格的模块化,它都能认识,并且编译成浏览器认识的JS。这样就知道,Gulp是一个工具,而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。
时间: 2024-10-14 13:11:13

js构建工具和预编译的相关文章

Rails : css或js文件无法成功预编译或调用jquery类插件时预编译问题

调用bootstrap css框架时,将bootstrap文件夹放入 vendor/assets/下 bootstrap文件结构如下:    [[email protected] demo]$ ls vendor/assets/bootstrap/     css  img  js [[email protected] demo]$ ls vendor/assets/bootstrap/css/     bootstrap.css  bootstrap.min.css  bootstrap-re

JS运行三部曲(预编译)

JS运行的三个步骤: 语法分析 预编译 解释执行 语法分析:通俗来说就是通篇检查你的代码有没有语法错误,有语法错误的话,程序是不会执行的 解释执行:也就是程序读一句执行一句 最重点的也就是预编译了,那么预编译到底是什么?它发什么在什么时候? 先来段代码压压惊 function fn (a) { console.log(a) var a = 123; console.log(a) function a () {} console.log(a) console.log(b); var b = fun

vue-cli3使用 DllPlugin 实现预编译,提升构建速度

在项目打包上有两个目标:减少打包代码体积和加快打包速度 1. 减少打包体积: (1)对于用的比较少的库,可以去掉(我去掉了jquery以及lodash),用到的地方,参考源码自己写 (2)非用不可的又比较大的库(我这里用了monaco-edit),使用cdn方式引入 打包体积减少的情况下,自然速度也会有所提升 2. 加快打包速度: 这里推荐一篇个人感觉很棒的文章 https://juejin.im/post/5bfa696d51882579117f7d26 我目前做了这些: (1)vue-cli

js预编译

先来做三个测试 eg1: 1 var a; 2 a = 1; 3 4 function a() {}; 5 console.log(a); eg2: 1 var a; 2 function a() {}; 3 console.log(a); eg3: 1 var a; 2 function a() {}; 3 a = 1; 4 console.log(a); eg1:输出1   eg2:输出a方法   eg3:输出1 为什么输出结果是这样的? 先来看看js预编译实现过程: 1.js首先扫描var

Handlebars.js 预编译(转)

Handlebars.js 官网上对预编译1是这样说的: 你需要安装 Node.js 你需要在全局环境中,通过 Npm 安装 handlebars 包 然后你就可以通过命令预编译你的 handlebars 模板文件: $ handlebars <input> --output <output> 假设我有一个模板文件,名称为 person.handlebars,内容很简单,如下: <table> <tr> <td>This is {{firstna

构建工具的发展及Android Gradle快速上手

前话: 最近谷歌宣布官方不再维护Eclipse ADT了,之后将更加专注于Android Studio的功能和性能上的改进,早在2013年的Google IO大会上首次推出了Android Studio,当时刚出来的时候我就好奇的去下载体验了一下,想看一下新开发工具的优势在哪里,据官方介绍,最吸引我的一点就是使用Studio使用了Gradle编译系统,可以支持很灵活的定制需求,而我当时正在研究当成库使用的APK(就是现在的aar文件,不过当时还没有出身),刚好遇到了ADT编译系统的限制,所以当时

JavaScript 预编译(变量提升和函数提升的原理)

本文部分内容转自https://www.cnblogs.com/CBDoctor/p/3745246.html 1.变量提升 1 console.log(global); // undefined 2 var global = 'global'; 3 console.log(global); // global 4 5 function fn () { 6 console.log(a); // undefined 7 var a = 'aaa'; 8 console.log(a); // aaa

gulp最佳实践(包含js,css,html预编译,合并,压缩,浏览器自动刷新)

gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name": "autopractice", "version": "1.0.0", "description": "", "main": "index.js", "sc

原生 js前端路由系统实现3之代码 构建工具 和 querystring功能

构建 目前前端构建工具流行的是 grunk.js 功能是大而全,但往往大而全的东西为了多样性 需要做额外的配置  我还是想要有一个专门为自己特性项目而生构建工具 我不想加载第三方的node模块,也不想写配置 ,想要的功能也很简单只是根据文件名字进行合并 build.js 名字规则: a-b-c.js 或者 a-b-c.txt a代表文件合并的顺序(这个顺序跟文件显示的顺序一致) 第一固定为0 最后固定为e  b代表合并后的文件名字  c代表自己的文件名字 以下代码会 寻找当前目录下src目录中的