第3篇 初始化工程

初始化工程是一个项目开发的第一步。迈出了这一步,你就成功了一半。我相信大部分同学构建了一个项目,是会拼着老命写完的(逃…)。

这里,我尝试用简单的方式来说明一个工程的构建。然后,再将简单的方式工程化(复杂化),最后拼凑成目前weex开源的代码结构。

安装weex-toolkit

weex-toolkit是一个很好的工具供我们工程构建。首先,第一步是安装该工具:

  1. $npm install -g weex-toolkit

测试weex-toolkit是否安装成功,可以使用如下命令测试:

  1. $ weex --version
  2. info 0.4.4

如果显示版本号即为成功。

创建项目

这里,我们不再使用weex 跑一个文件的形式。我们需要一个较为完整的方案,因此,这里采用weex init命令创建项目。

首先,我们创建一个目录存放我们的项目,启动命令行:

  1. $ mkdir test
  2. $ cd test
  3. $ weex init
  4. //下面一路空格即可
  5. prompt:ProjectName:(test)
  6. file:.gitignore created.
  7. file: README.md created.
  8. file: index.html created.
  9. file:package.json created.
  10. file: src/main.we created.
  11. file: webpack.config.js created.

跑起项目

首先,我们需要安装依赖。以后大家看到package.json文件,就可以直接npm i 安装模块了。但是, 有些项目需要确保下载的依赖和目前的版本一致,这就是工程一致性的后话了。

  1. $ npm install

依赖安装完成,启动项目编译。

  1. $ npm run dev

启动轻量服务器。

  1. $ npm run serve

这时,打开浏览器,输入http://127.0.0.1:8080, 就会看到如下界面效果:

3. 初始化工程干了一件什么事儿 - 图1

npm run dev干了什么事儿

当然这一些都是node/npm的常识了。首先,我们打开package.json文件。可以看到如下代码:

3. 初始化工程干了一件什么事儿 - 图2

我们可以看到scripts里面包含了build、dev、serve、test四个属性。例如dev属性,npm run dev实际上相当于 webpack —watch。即等同开发者做了这件事:

  1. $ webpack --watch

ok,看到这里明白了。npm run dev调用了webpack。那么,webpack实际上是执行了配置文件。
webpack默认是webpack.config.js作为配置文件的。所以看一下webpack.config.js中的内容。

3. 初始化工程干了一件什么事儿 - 图3

这个文件比较好理解。一个是引入了webpack的配置,一个是使用了weex-loader模块。
entry属性是表示入口文件,output表示输出文件,默认输出到dist问价夹。所有打开dist就可以看到一个打包完成的main.js文件。

npm run serve

这个同上,不做展开,主要是做一个服务器,提供浏览器访问静态资源。

入口文件index.html

是时候,去了解我们index.html文件干了一件啥事。其实,index.html就是页面的入口文件。具体大码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <metacharset="utf-8">
  5. <title>Weex HTML5</title>
  6. <metaname="apple-mobile-web-app-capable"content="yes"/>
  7. <metaname="apple-mobile-web-app-status-bar-style"content="black"/>
  8. <metaname="apple-touch-fullscreen"content="yes"/>
  9. <metaname="format-detection"content="telephone=no, email=no"/>
  10. <style>
  11. html, body,#weex {
  12. width:100%;
  13. height:100%;
  14. }
  15. </style>
  16. <scriptsrc="./node_modules/weex-html5/dist/weex.js"></script>
  17. </head>
  18. <body>
  19. <divid="weex"></div>
  20. <script>
  21. /**
  22. * Init weex instance depending on the url params.
  23. * There are three ways to load weex bundles, depends on the
  24. * parameter 'loader' in the url:
  25. *
  26. * + xhr: use XMLHttpRequest. Parameter 'page' should be
  27. * the bundle's url.
  28. * + source: use the transformed code itself. 'page' should
  29. * be the transformed weex bundle.
  30. *
  31. * @param {String} bundle - It has different meaning depends on
  32. * the type of loader.
  33. */
  34. (function(){
  35. function getUrlParam (key){
  36. var reg =newRegExp('[?|&]'+ key +'=([^&]+)')
  37. var match = location.search.match(reg)
  38. return match && match[1]
  39. }
  40. var loader = getUrlParam('loader')||'xhr'
  41. var page = getUrlParam('page')||'dist/main.js'
  42. window.weex.init({
  43. appId: location.href,
  44. loader: loader,
  45. source: page,
  46. rootId:'weex'
  47. })
  48. })();
  49. </script>
  50. </body>
  51. </html>

作为入口和载体,htmk做了两件事:
1) 拿到页面的URL,根据page参数获得需要加载的js文件路径
2)初始化weex实例,加载文件。
此处文章可参考:http://alibaba.github.io/weex/doc/advanced/integrate-to-html5.html

是否可以更好的理解weex github源码结构

到这里,整个weex项目的来龙去脉,应该是比较清楚了。那么,回过头来看,weex开源代码如何构建,应该是件水到渠成的事了。比如看这段打包的配置代码:https://github.com/alibaba/weex/blob/dev/build/webpack.examples.config.js

  1. var path = require('path');
  2. var fs = require('fs');
  3. var entry ={};
  4. function walk(dir){
  5. dir = dir ||'.'
  6. var directory = path.join(__dirname,'../examples', dir);
  7. fs.readdirSync(directory)
  8. .forEach(function(file){
  9. var fullpath = path.join(directory, file);
  10. var stat = fs.statSync(fullpath);
  11. var extname = path.extname(fullpath);
  12. if(stat.isFile()&& extname ==='.we'){
  13. var name = path.join('examples','build', dir, path.basename(file, extname));
  14. entry[name]= fullpath +'?entry=true';
  15. }elseif(stat.isDirectory()&& file !=='build'&& file !=='include'){
  16. var subdir = path.join(dir, file);
  17. walk(subdir);
  18. }
  19. });
  20. }
  21. walk();
  22. module.exports ={
  23. entry: entry,
  24. output :{
  25. path:'.',
  26. filename:'[name].js'
  27. },
  28. module:{
  29. loaders:[
  30. {
  31. test:/\.we(\?[^?]+)?$/,
  32. loader:'weex'
  33. },
  34. {
  35. test:/\.js(\?[^?]+)?$/,
  36. loader:'weex?type=script'
  37. },
  38. {
  39. test:/\.css(\?[^?]+)?$/,
  40. loader:'weex?type=style'
  41. },
  42. {
  43. test:/\.html(\?[^?]+)?$/,
  44. loader:'weex?type=tpl'
  45. }
  46. ]
  47. }
  48. }

就是编译examples目录下所有.we文件到build目录。代码可以细看,都是Node.js File System相关的API.