Skip to content

libra1010/browerifyDemo

Repository files navigation

package.json 可以配置项目依赖哪些模块,最后获取项目源码是 可以直接使用npm install 就会自动安装所有依赖的模块

npm install -g gulp-cli //全局安装gulp-cli


//安装typescript gulp gulp-typescript 到项目中
// Gulp-typescript是TypeScript的一个Gulp插件
npm install --save-dev typescript gulp gulp-typescript


//webstrom 可以新建一个tsconfig.json 文件,这个文件可以配置怎样编译TypeScript

//如果报 Local gulp not found in "xxx" 这种表示没有在项目中安装gulp 推荐安装gulp 等一些版本JS,安装在本地,当时候GIT忽略node_modules 文件夹,最终可以使用npm install 安装项目所需的JS库

//项目中使用gulpfile
//1:新建一个gulpfile.js 项目中的gulpfile.1.js 这样就可以编译TypeScript 文件了

//2:使用gulp 压缩JS 具体查看gulpfile.2.js
npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev
// gulp-minify-css 压缩CSS
//gulp-concat 连接文件,合并文件
// gulp-uglify  压缩JS
//gulp-rename 变更名称
//del 删除文件


//3:集成 Browserify Browserify是可以将node的commonJs 转换成浏览器可以使用的JS代码的模块管理工具,意味着让你使用nodeJS的方式编写浏览器代码,比如可以使用模块管理带来的便利性,最终将使用的摸块合并成一个JS文件,方便浏览器使用
//具体参见 gulpfile.3.js
npm install --save-dev browserify tsify vinyl-source-stream
// tsify是Browserify的一个插件,就像gulp-typescript一样,它能够访问TypeScript编译器。 vinyl-source-stream会将Browserify的输出文件适配成gulp能够解析的格式,它叫做 vinyl。


//4:Watchify启动Gulp并保持运行状态,当你保存文件时自动编译。 帮你进入到编辑-保存-刷新浏览器的循环中。
//Babel是个十分灵活的编译器,将ES2015及以上版本的代码转换成ES5和ES3。 你可以添加大量自定义的TypeScript目前不支持的转换器
//Uglify帮你压缩代码,将花费更少的时间去下载它们。
//安装 watchify 具体参见 gulpfile.4.js
npm install --save-dev watchify gulp-util

//5: 因为Uglify是用于混淆你的代码,所以我们还要安装vinyl-buffer和gulp-sourcemaps来支持sourcemaps。  sourcemaps 可以生成debug调试,类似于PDB这种符号文件吧。可以将压缩的JS映射到没有压缩的源文件
//使用chrome浏览器,可以直接断点到TS代码
//gulpfile.5.js 同样debug为true,和其他不同的就是 会有一个 bundle.js.map 文件
//具体参见 gulpfile.5.js
npm install --save-dev gulp-uglify vinyl-buffer gulp-sourcemaps

//6:Babel 首先安装Babelify和ES2015的Babel预置程序。 和Uglify一样,Babelify也会混淆代码,因此我们也需要vinyl-buffer和gulp-sourcemaps。
//默认情况下Babelify只会处理扩展名为 .js,.es,.es6和.jsx的文件,因此我们需要添加.ts扩展名到Babelify选项。
//Babel是个十分灵活的编译器,将ES2015及以上版本的代码转换成ES5和ES3。 你可以添加大量自定义的TypeScript目前不支持的转换器
//具体参见gulpfile.6.js
npm install --save-dev babelify babel-preset-es2015 vinyl-buffer gulp-sourcemaps
我们需要设置TypeScript目标为ES2015。 Babel稍后会从TypeScript生成的ES2015代码中生成ES5。 修改 tsconfig.json: compilerOptions target 修改为es2015

//7:加入JQUERY准备进入正题测试
//具体参见gulpfile.7.js 和src/jquery.1.ts 文件
npm install jquery --save-dev

//如果允许任务提示缺少什么包就自己手动装吧,我也不知道为什么没有自动解析依赖性


About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published