-
Notifications
You must be signed in to change notification settings - Fork 0
libra1010/browerifyDemo
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
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 0
No packages published