第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: Project Name:  (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.   <meta charset="utf-8">
  5.   <title>Weex HTML5</title>
  6.   <meta name="apple-mobile-web-app-capable" content="yes" />
  7.   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  8.   <meta name="apple-touch-fullscreen" content="yes" />
  9.   <meta name="format-detection" content="telephone=no, email=no" />
  10.   <style>
  11.     html, body, #weex {
  12.       width: 100%;
  13.       height: 100%;
  14.     }
  15.   </style>
  16.   <script src="./node_modules/weex-html5/dist/weex.js"></script>
  17. </head>
  18. <body>
  19.   <div id="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 = new RegExp('[?|&]' + key + '=([^&]+)')
  37.       var match = location.search.match(reg)
  38.       return match && match[1]
  39.     }
  41.     var loader = getUrlParam('loader') || 'xhr'
  42.     var page = getUrlParam('page') || 'dist/main.js'
  44.     window.weex.init({
  45.       appId: location.href,
  46.       loader: loader,
  47.       source: page,
  48.       rootId: 'weex'
  49.     })
  50.   })();
  51.   </script>
  52. </body>
  53. </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');
  4. var entry = {};
  6. function walk(dir) {
  7.   dir = dir || '.'
  8.   var directory = path.join(__dirname, '../examples', dir);
  9.   fs.readdirSync(directory)
  10.     .forEach(function(file) {
  11.       var fullpath = path.join(directory, file);
  12.       var stat = fs.statSync(fullpath);
  13.       var extname = path.extname(fullpath);
  14.       if (stat.isFile() && extname === '.we') {
  15.         var name = path.join('examples', 'build', dir, path.basename(file, extname));
  16.         entry[name] = fullpath + '?entry=true';
  17.       } else if (stat.isDirectory() && file !== 'build' && file !== 'include') {
  18.         var subdir = path.join(dir, file);
  19.         walk(subdir);
  20.       }
  21.     });
  22. }
  24. walk();
  26. module.exports = {
  27.   entry: entry,
  28.   output : {
  29.     path: '.',
  30.     filename: '[name].js'
  31.   },
  32.   module: {
  33.     loaders: [
  34.       {
  35.         test: /\.we(\?[^?]+)?$/,
  36.         loader: 'weex'
  37.       },
  38.       {
  39.         test: /\.js(\?[^?]+)?$/,
  40.         loader: 'weex?type=script'
  41.       },
  42.       {
  43.         test: /\.css(\?[^?]+)?$/,
  44.         loader: 'weex?type=style'
  45.       }, 
  46.       {
  47.         test: /\.html(\?[^?]+)?$/,
  48.         loader: 'weex?type=tpl'
  49.       }
  50.     ]
  51.   }
  52. }

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