weex环境搭建

背景

weex官网安装node.js，安装npm（为速度，改为淘宝镜像），可能还需要安装Python，要求2.7版

参考站点

安装 weex-toolkit，weex集成环境

npm install -g weex-toolkit

调试某个we程序，可以用如下命令（如调试test.we）

weex test.we --qr

初始化项目

如果你是准备新建一个项目，那要复杂些了。 weex命令的info有一个命令没有提到，那就是 weex init即是初始化一个项目。建立一个项目目录，进入到此目录下。

weex init

接着安装相关依赖

npm install

一些修改

我尝试时时不成功的，需要修改package.json，修改其中weex-components的版本号为0.1.3

"weex-components": "0.1.3"

修改webpack.config.js文件，以支持遍历所有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'
      }
    ]
  }
}

使用

编译

npm run build

16-09-22 add 升级0.52版本后，有个bug，编译会出错解决方法如下

npm install -g  babel-plugin-transform-runtime
npm install -g  babel-preset-es2015

复制 C:\Users\sun\AppData\Roaming\npm\node_modules 目录下的babel-plugin-transform-runtime和babel-preset-es201到 C:\Users\sun\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\weex-loader\node_modules下，阿里到底怎么测试的呀

执行

npm run serve