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

第3篇初始化工程
安装weex-toolkit
创建项目
跑起项目
npm run dev干了什么事儿
npm run serve
入口文件index.html
是否可以更好的理解weex github源码结构

第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>, 就会看到如下界面效果:

npm run dev干了什么事儿

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

我们可以看到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中的内容。

这个文件比较好理解。一个是引入了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.

第3篇 初始化工程