WEEX｜初始化工程

来源：互联网发布：英文写作润色软件编辑：程序博客网时间：2024/05/21 07:51

weex-toolkit

首先确认已经安装weex-toolkit,这是weex的集成环境，我使用的版本是0.5.8

$ weex --version    info 0.5.8

在创建项目前我们先来了解下Weex的命令

$ weexinfo Usage: weex foo/bar/we_file_or_dir_path  [options]Usage: weex debug [options] [we_file|bundles_dir]Usage: weex init选项：  --qr          display QR code for PlaygroundApp                      [boolean]  --smallqr     display small-scale version of QR code for PlaygroundApp,try it                if you use default font in CLI                         [boolean]  -o, --output  transform weex we file to JS Bundle, output path must specified                (single JS bundle file or dir)                [for create sub cmd]it specified we file output path                                                  [默认值: "no JSBundle output"]  --watch       using with -o , watch input path , auto run transform if change                happen  -s, --server  start a http file server, weex .we file will be transforme to JS                bundle on the server , specify local root path using the option                                                                        [string]  --port        http listening port number ,default is 8081         [默认值: -1]  --wsport      websocket listening port number ,default is 8082    [默认值: -1]  --np          do not open preview browser automatic                  [boolean]  -f, --force   [for create sub cmd]force to replace exsisting file(s) [boolean]  --help        显示帮助信息                                           [boolean]  -h, --host                                               [默认值: "127.0.0.1"]weex debug -h for Weex debug help information.for cmd example & more information please visithttps://www.npmjs.com/package/weex-toolkit

如果你想调试某个we文件，那么在终端中执行weex 文件名.we即可以运行在本地浏览器中

weex 文件名.we

–qr 可显示本地地址文件的二维码，安装playground后既可以扫描二维码看到we文件的页面
-h 是热更新,但只对浏览器有效

weex 文件名.we --qr weex 文件名.we -h

初识WE文件

weex程序的文件拓展名是.we。因此我们创建一个.we的文件。Mac OSX的同学，可以使用touch命令创建文件。

$ touch helloworld.we

若我们打开空白的helloworld.we文件，可以看到内容为三个标签：

<template></template><style></style><script></script>

为helloworld.we 的 template 添加内容并增加些简单的样式

<template>   <div>     <text class="text" style="color:red;">Hello world</text>   </div> </template> <style>   .text{       font-size:160;   } </style> <script></script>

现在使用weex-toolkit来编译代码，使用weex命令编译helloworld.we文件

$ weex helloworld.we

即可在浏览器中看见效果图，我们既然运行了程序，那么一定有一个.html作为程序入口。其实，weex-toolkit给我们生成了相关文件。我们可以到helloworld.we同级目录下查找，就会发现有一个weex_tmp文件。该文件夹就是生成的可以执行的浏览器代码。
这里写图片描述

初始化工程

这里采用weex init命令创建一个整体项目，而不只是创建we文件。首先，我们创建一个目录存放我们的项目，启动命令行

$ mkdir weex-test      $ cd weex-test    $ weex init prompt: Project Name:  (weex-test)file: .gitignore created.file: README.md created.file: index.html created.file: package.json created.file: src/main.we created.file: webpack.config.js created.

接着安装依赖

$ npm install

这时有可能提示

npm WARN babel-loader@6.2.5 requires a peer of babel-core@^6.0.0 but none was installed.

你可以输入

npm install babel-core

到这里我们创建了一个目录，然后初始化了一个weex项目。让我们看看他的目录结构：

src-代码目录
index-浏览器启动页面
webpack.config.js-webpack的配置文件
这里写图片描述
从package.json文件可以看出npm run dev实际上相当于 webpack –watch，而webpack实际上是执行了默认的webpack.config.js配置文件

依赖安装完成后，启动项目编译

$ npm run dev  > weex-yy@1.0.0 dev /Users/nostalgia/weex-yy> webpack --watchHash: 5c4f33f5664bbf3f139cVersion: webpack 1.13.2Time: 864ms  Asset     Size  Chunks             Chunk Namesmain.js  3.34 kB       0  [emitted]  main    + 4 hidden modules

再启动轻量服务器

$ npm run serve > weex-yy@1.0.0 serve /Users/nostalgia/weex-yy> serve -p 8080serving /Users/nostalgia/weex-yy on port 8080

这时，打开浏览器输入http://127.0.0.1:8080看看
这里写图片描述
当看到该界面效果，我们已经成功启动了这个项目。

不完美的webpack.config.js

刚刚说到webpack实际上是执行了默认的webpack.config.js配置文件，这里先来看一下webpack.config.js文件，其中：

webpack.config.js 引入webpack和weex-loader
entry属性是表示入口文件
output表示输出文件，默认输出到dist文件夹。

require('webpack')require('weex-loader')var path = require('path')module.exports = {  entry: {    main: path.join(__dirname, 'src', 'main.we?entry=true')  },  output: {    path: 'dist',    filename: '[name].js'  },  module: {    loaders: [      {        test: /\.we(\?[^?]+)?$/,        loaders: ['weex-loader']      }    ]  }}

不过这个自动产生的webpack.config.js的文件的不完美在于entry仅仅只有一个main.js文件，当你添加一个新的we文件，他不会自动build为js文件，为解决这个问题，我们可以：
1、在代码中逐个手动添加，如添加helloworld.we

entry: { main: path.join(__dirname, 'src', 'main.we?entry=true'), helloworld: path.join(__dirname, 'src', 'helloworld.we?entry=true') }

2、自动遍历所有的we文件（推荐）

require('webpack')require('weex-loader')var path = require('path');var fs = require('fs');var entry = {};(function walk(dir) {  dir = dir || '.'  var directory = path.join(__dirname, 'src', dir);  fs.readdirSync(directory)    .forEach(function(file) {      var fullpath = path.join(directory, file);      var stat = fs.statSync(fullpath);      var extname = path.extname(fullpath);      if (stat.isFile() && extname === '.we') {        var name = path.join('dist', dir, path.basename(file, extname));        entry[name] = fullpath + '?entry=true';      } else if (stat.isDirectory() && file !== 'dist' && file !== 'include') {        var subdir = path.join(dir, file);        walk(subdir);      }    });})();module.exports = {  entry: entry,  output: {    path: '.',    filename: '[name].js'  },  module: {    loaders: [      {        test: /\.we(\?[^?]+)?$/,        loader: 'weex'      },      {        test: /\.js(\?[^?]+)?$/,        loader: 'weex?type=script'      },      {        test: /\.css(\?[^?]+)?$/,        loader: 'weex?type=style'      },      {        test: /\.html(\?[^?]+)?$/,        loader: 'weex?type=tpl'      }    ]  }}//获取当前ip地址function getIPAddress(){  var os = require('os');  var ips = os.networkInterfaces();  var address ;  for(var item in ips){    for(var data in ips[item]){      var ip = ips[item][data];      if(ip.address.indexOf('192')==0){          address = ip.address;          return address;      }    }  }}//生成原生调试二维码var qrcode = require('qrcode-terminal');qrcode.generate("http://"+getIPAddress()+":12580/dist/main.js");console.log("\r\n按住ctrl点击右侧地址打开应用--->http://localhost:12580\r\n");

此时执行 npm run dev的时候便可以对src文件夹进行遍历，同时根据当前ip生成了一下main.js文件的二维码，方便playground直接调试。

源码结构

另外有想了解源码目录结构的小伙伴们可以在GitHub上下载源代码，或使用git克隆代码到本地

$ git clone https://github.com/alibaba/weex.git

具体源码结构的介绍可以参考文章：了解Weex源码结构，修改example

1 0