同构
有的时候我们为什么要了解其原理呢?如果不了解原理仅是停留在应用层，的确在遇到小问题上会越走越偏。这是我们学习 java 为什么又要学习 jvm ，学习 javascript 和 nodejs 又为什么还要学习 c++ 和了解浏览器底层的原因了。
提升内功是会对你编写代码提供个人能力有潜移默化的作用。
我们已经在之前完成服务端部分代码开发，搭建起了应用，现在要做的是将服务端的应用打包发送给客户端进行运行。现在可以将 nodejs 的部分考核库打包到客户端的框架有很多，例如今天用 brower 和我们再熟悉不过的 webpack 都可以实现将服务端打包到客户端。
"babelify": "^6.3.0",
"browserify": "^11.0.1",
"vinyl-source-stream": "^1.1.0"
在 package.json 加入这部分代码（browser）作用就是当编译 ./src/index.js 文件会在浏览器端使用 src/index.client.js 进行打包。已经创建好了 index.client.js 在文件中简单地打印一句话作为测试
console.log("hello browser");
"browser": {
"./src/index.js": "./src/index.client.js"
}
然后在 gulp 构建文件中加入 bundle 任务，将 index.client 文件打包到 build/application.js 文件中。
gulp.task('bundle',()=>{
var b = browserify({
entries:'src/index.js',
debug:true,
transform: ['babelify']
})
return b.bundle()
.pipe(source('build/application.js'))
.pipe(gulp.dest('dist'));
})
在 index.js 中加入如下代码，用于将创建好的 application.js 发送给服务端供 index.html 引用。
server.route({
method:'GET',
path:APP_FILE_PATH,
handler:(request,reply)=>{
console.log('load application')
reply.file('dist/build/application.js');
}
});
在 index.html 模板文件中预留接收创建好的 application.js 文件的占位符。
<body>
<h1>zidea</h1>
<p>{{body}}</p>
</body>
<script type="text/javascript" src="{{application}}"></script>
const APP_FILE_PATH = '/application.js';
在 Controller 中将 application 变量引入来替换模板文件中的占位符
document:function(application,controller,request,reply,body,callback){
nunjucks.render("index.html",{body:body,application:APP_FILE_PATH},(err,html)=>{
if(err){
return callback(err,null);
}
console.log(html);
callback(null,html);
});
},
当我们成功地在客户端的控制台看到 hello browser 就说明我们成功了。
网友评论