摘要:本文的目的在于使用npm进行js类库依赖管理,同时精简html中繁杂的导入。 目前类库加载器(如requirejs/seajs等)可以解决script加载的问题。希望本文对大家学WEBAPP有所帮助。。
本文的目的在于使用npm进行js类库依赖管理,同时精简html中繁杂的<script>导入。
目前类库加载器(如requirejs/seajs等)可以解决script加载的问题。但对依赖处理不好,还需要开发者一个一个去下载js库,根据个人喜好把js堆砌在项目中。
nodejs中的npm等工具可以很好的处理依赖,但它是为nodejs服务的,它的模块打包格式是CMD,而requirejs是AMD。seajs官方倒是推荐了spm,据说该项目已经终止维护了。
在一定程度上,nodejs的bower插件可以维护AMD类库的依赖,但和requirejs合并共处,我一直没搞明白。
抽时间梳理了一下npm+gulp+browserify的组合,感觉还不错。npm来管理CMD类库的依赖,browserify来进行CMD到AMD的转换,gulp来管理browserify进行自动构建。
构建前是多个js,构建后会把编写的代码js和依赖的类库打包为一个js文件。这样,html中只需要导入一个js文件就可以了。
注:这里没有类加载器的事。
准备环境
从一个裸centos开始。 [vagrant@bogon ~]$ cat /etc/redhat-releaseCentOS release 6.7 (Final) [vagrant@bogon ~]$ which node /usr/bin/which: no node in (/usr/local/bin:/bin:/usr/bin:/usr/local/sbin:/usr/sbin:/sbin:/home/vagrant/bin) 安装nodejs 不要使用yum装nodejs,epel中的版本太低,而其他仓库的拉取速度太慢。 [vagrant@bogon myweb]$ npm -v1.3.6 [vagrant@bogon myweb]$ node -v v0.10.46 目前npm已经4.1.1了, 而nodejs版本都已经6.9.2 LTS/7.3.0 latest了。 推荐使用淘宝镜像站的安装包。 #需要root# sudo -i# yum install -y perl# cd /opt# wget https://npm.taobao.org/mirrors/node/v6.9.2/node-v6.9.2.tar.gz # tar xvfz node-v6.9.2.tar.gz# ln /opt/node-v6.9.2-linux-x64/bin/node /usr/bin/node# cd /opt/node-v6.9.2-linux-x64/lib/node_modules/npm# make && make install 使用淘宝cnpm加速npm npm install -g cnpm --registry=https://registry.npm.taobao.org 到现在为止,你完全可以用cnpm代替npm,当然如果你的npm速度够快也可以不用考虑。 安装全局插件 gulp建议安装到全局,这样可以通过命令行gulp运行。如果安装到项目,就需要使用路径访问,如:node ./node_modules/gulp/bin/gulp.js $ sudo cnpm install -g gulp $ sudo gulp -v [08:05:11] CLI version 3.9.1 [08:05:11] Local version 3.9.1 我用虚拟机测试,在宿主机器上访问方便,安装一下http-server。 $ sudo cnpm install -g http-server 前端开发 创建项目 $ mkdir ~/myweb$ cd ~/myweb$ cnpm init 一路回车,缺省就可以了。实际开发中输入自己的项目信息。 安装js依赖 jquery很常用,就以它为例。 $ npm install jquery@1.12.4 这时候文件就在项目目录的node_modules中了。目前目录结构如下: $ tree node_modules -L 2 node_modules └── jquery ├── AUTHORS.txt ├── bower.json ├── dist ├── external ├── LICENSE.txt ├── package.json ├── README.md └── src 这时候在node_modules/jquery/dist已经有jquery.min.js了。 在项目目录创建index.html测试一下: <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <script src="node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script></head><body><div id="div1"> 123</div><button id="edit">修改</button><script type="text/javascript"> $(function(){ $("#edit").on("click",function(){ $("#div1").text("abc"); }); });</script></body></html> 启动http-server: [vagrant@bogon myweb]$ http-server Starting up http-server, serving ./ Available on: //127.0.0.1:8080 //10.0.2.15:8080 //192.168.33.11:8080 它自动以当前目录为webroot启动一个简单的web服务。 访问网址测试正常与否://192.168.33.11:8080/index.html 这样可以了吗?这不是本文的目的,如果需要使用多个js类库,还是有很多的<script src="balaba.js"/>。 安装browserify 如果单独使用browserify,应该安装在全局。 $ sudo cnpm install -g browserify 项目结构调整 构建过程中,源码在src中,构建后会保存到dist中,html实际引入的是dist的。考虑代码保护,我们可能还要对js等资源混淆,所以不应该把src目录暴漏在webroot中。 本例项目结构采用maven工程格式,考虑约定俗成的习惯,构建结果保存到$webroot/js中: [vagrant@bogon myweb]$ tree src src └── main ├── nodejs └── webapp └── js 编写示例 src/main/webapp/index.html 仍然使用之前的例子,将123改为abc,现在把代码单独从js/index.js中引入。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/index.js" charset="utf-8"></script></head><body><div class="container" id="div1"> 123</div><button id="edit">修改</button> </body></html> src/main/nodejs/index.js 注意: 此index.js非彼index.js。 var $ = require("jquery");$(function(){ $("#edit").on("click",function(){ $("#div1").text("abc"); });}); 有疑问了,jquery在哪里?管他呢,browserify知道就行了。 browserify转换 browserify src/main/nodejs/index.js -o src/main/webapp/js/index.js 测试 cd src/main/webapp http-server 注意,项目结构变了,执行http-server要进入webroot目录。 gulp自动构建 每一次编辑js都手动调用browserify不现实,我们可以使用gulp进行自动构建。 创建gulpfile.js var gulp = require("gulp");var watch = require("gulp-watch");var browserify = require("browserify");var sourcemaps = require("gulp-sourcemaps");var source = require('vinyl-source-stream');var buffer = require('vinyl-buffer'); gulp.task("browserify", function () { var b = browserify({ entries: "./src/main/nodejs/index.js", debug: true }); return b.bundle() .pipe(source("index.js")) .pipe(buffer()) .pipe(sourcemaps.init({loadMaps: true})) .pipe(sourcemaps.write(".")) .pipe(gulp.dest("./src/main/webapp/js")); }); gulp.task("watch",function(){ gulp.watch("./src/main/nodejs/index.js",["browserify"]); }); 安装gulp的插件 cnpm install browserify cnpm install gulp cnpm install gulp-watch cnpm install gulp-sourcemaps cnpm install vinyl-source-stream cnpm install vinyl-buffer cnpm install debug-fabulous cnpm install debug cnpm install css 测试gulp任务 gulp browserify 启动gulp监听进程 gulp会监听”./src/main/nodejs/index.js”的变化,然后指定”browserify”任务。 $ sudo gulp watch [09:37:00] Using gulpfile /home/vagrant/myweb/gulpfile.js [09:37:00] Starting 'watch'... [09:37:00] Finished 'watch' after 8.91 ms 这时候可以回到eclipse编辑代码,一旦修改了”./src/main/nodejs/index.js”就会自动构建,刷新页面就看到效果了。 [vagrant@bogon myweb]$ sudo gulp watch [09:37:00] Using gulpfile /home/vagrant/myweb/gulpfile.js [09:37:00] Starting 'watch'... [09:37:00] Finished 'watch' after 8.91 ms [09:38:34] Starting 'browserify'... [09:38:35] Finished 'browserify' after 740 ms gulp监听到09:38:34文件被编辑了,即刻构建。 gulp绑定多个文件 如果构建的js很多,gulp文件会很大。 增加插件: cnpm install gulp-rename cnpm install event-stream 修改gulpfile.js var gulp = require('gulp');var source = require('vinyl-source-stream');var rename = require('gulp-rename');var browserify = require('browserify');var es = require('event-stream'); gulp.task('browserify', function(){ //定义多个入口文件 var entityFiles = [ './src/main/nodejs/index.js', './src/main/nodejs/a.js', ]; //遍历映射这些入口文件 var tasks = entityFiles.map(function(entity){ return browserify({entries: [entry]}) .bundle() .pipe(source(entry)) .pipe(rename({ extname: '.bundle.js', dirname: '' })) .pipe(gulp.dest('./src/main/webapp/js')); }); //创建一个合并流 return es.merge.apply(null, tasks); }); gulp.task("watch",function(){ gulp.watch("./src/main/nodejs/*.js",["browserify"]); }); 文件名会修改为index.bundle.js,可以写多个文件。 绑定任意多个文件 增加插件: cnpm install glob 修改gulp var gulp = require('gulp');var source = require('vinyl-source-stream');var rename = require('gulp-rename');var browserify = require('browserify');var es = require('event-stream');var glob = require('glob'); gulp.task('browserify', function(done){ glob('./src/main/nodejs/*.js', function(err, files) { if(err) done(err); var tasks = files.map(function(entry) { return browserify({ entries: [entry] }) .bundle() .pipe(source(entry)) .pipe(rename({ extname: '.bundle.js', dirname: '' })) .pipe(gulp.dest('./src/main/webapp/js')); }); es.merge(tasks).on('end', done); }) }); gulp.task("watch",function(){ gulp.watch("./src/main/nodejs/*.js",["browserify"]); });
完美~
Final
gulp很强大,插件太多,这里只是冰山一角,以后有时间梳理一下gulp。
写到这里发现sudo执行gulp时生成的文件有权限问题,先mark以后再调整吧。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号