WEEX|初始化工程
来源:互联网 发布:英文写作润色软件 编辑:程序博客网 时间:2024/06/10 19:13
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
- WEEX|初始化工程
- 创建weex工程
- Weex项目初始化weex-iOS集成
- Weex项目初始化weex-iOS集成
- Weex项目初始化weex-iOS集成
- Weex项目初始化weex-iOS集成
- Weex项目初始化weex-iOS集成
- Weex系列一、构建Weex工程
- weex sdk集成到Android工程三. weex服务项目搭建
- weex sdk集成到Android工程
- weex sdk集成到Android工程
- Weex SDK集成到Android工程
- weex sdk集成到Android工程
- Weex
- weex
- WEEX
- weex
- weex sdk集成到Android工程二. weex sdk集成到Android工程
- Android Design Support Library
- oAuth
- PHP调试时echo print() print_r() var_dump()的区别
- 找工作之Effective C++
- 状态压缩
- WEEX|初始化工程
- GObject 学习笔记汇总---7
- clang static analyzer源码分析(番外篇):RegionStore以及evalCall()中的conservativeEvalCall
- UVA 10723
- SAP HANA Smart Data Access 远程连接HANA\ORACLE 转载有修改
- 2016CCPC合肥赛区总结(流水账)
- 程序员的自我修养-运行库
- 一个自定义的 View,支持显示下载进度,完成和结束的时候会有酷酷的动画。
- 如何获取radio的值