weex中页面其实就是一个js文件，这个js文件由页面业务代码和库代码组成。我们可以把库代码抽出来放到远端，供所有页面使用。
weex提供的JS Service技术，它允许我们在页面加载前注入一段js代码，在页面加载后使用。
我们需要把库代码统一放在一个js文件中，再将这个文件放到服务器上。
一般我们的项目有很多的工具类，这些工具类又依赖大量的npm第三方库。要想把这些源码都一起放进service文件里，需要拿到npm第三方库的源码，我们可以使用webpack打包这些npm的第三方库
新建一个js文件，只引用npm的第三方库
// npm_libs.js
const md5 = require('md5');
const qs = require('qs');
...
module.exports = {
md5,
qs
}
用webpack打包该js文件，打包后的js需要用全局变量引用里面的module.export
var BasicLib;
...
module.exports = {
md5: md5
}
...
BasicLib = module.exports
service文件的代码是这样的，因为工具库可能需要用到weex对象和其它变量，所以在这些变量传进去之后再去构造它们
var npm_libs = ...;
var weex;
var NODE_ENV;
var someutil;
var init_someutil = function () {
someutil = {
md5: npm_libs.md5('123')
}
}
var _init = function () {
init_someutil();
}
service.register('KSService', {
create: function(id, env, config) {
return {
instance: {
},
NormalService: function(_weex, _NODE_ENV) {
weex = _weex;
NODE_ENV = _NODE_ENV;
_init();
return {
someutil
}
}
}
},
refresh: function(id, env, config){
},
destroy: function(id, env) {
}
})
这样service文件就创建好了，下面看如何使用
var libs = new service.NormalService(weex, 'debug')
console.log(libs.someutil.md5)
但是实际上，我们肯定有很多的工具库，这么多工具库代码全部放在一个js文件里是不合适的，所以我们先按之前的方式将工具库代码放进service文件中，再将它们拆分成多个js文件，以后只对这些js文件进行维护即可
使用脚本合并这些拆分出来的js文件
import os
import sys
root = os.path.abspath('.')
files = ['a', 'b', 'c']
servieFile = root + '/dist/' + 'service.js'
saveto = open(servieFile, 'w')
content = ''
for file in files:
path = root + '/src/libs/' + file + '.js'
exist = os.path.exists(path)
if exist is False:
print('error: file not exist ' + path)
sys.exit()
with open(path) as f:
content = content + '\n' + f.read()
saveto.write(content)
print('libs saves to ' + servieFile)
现在我们需要在每次代码修改后自动执行这个合并脚本，可以用webpack的插件实现
// hook这个再执行我们上面写的合并脚本
compiler.plugin('emit', function(compilation, callback) {
// run py script
});
这样，合并脚本就会在每次打包的时候自动执行了，但是这些拆分的js也会被打进dist目录，我们需要这些无用的文件，这里可以用chokidar监控那个目录，有改动就进行目录删除
const unuseDistFiles = './dist/src';
chokidar.watch(unuseDistFiles).on('all', (event, path) => {
deleteDir(unuseDistFiles)
});
这样就完成了，也可以在生产环境下使用uglify-es进行js压缩
if (env == 'production') {
console.log('uglify js ' + path + ' started')
var code = {
"file.js": fs.readFileSync(path, "utf8"),
};
var options = {
mangle: false,
toplevel: true,
output: {
beautify: false
}
};
var result = UglifyJS.minify(code, options);
if (result.error == undefined) {
fs.writeFileSync(path, result.code, 'utf8')
console.log('uglify js ' + path + ' successed')
}
}
由于页面js会依赖这个service文件，所以一定要确保service加载完了再去加载页面js，否则页面会报错。并且这个service文件需要和页面文件一起进行版本管理，保证页面和service版本一致。
在原来的库文件中，去引用新的service即可实现无缝切换。