深入浅出weex-builder-CSDN博客

从几个问题来深入浅出一下weex的脚手架weex-builder

此为weex打包篇，后续会聊weex的编译篇，下面结合我自己基于weex-builder扩展的firefly-cli进行讲解，用法一致

question1. firefly-build(类比weex-build) src dest如何运作?

请结合firefly-cli或者weex-builder源码来读这篇文章
firefly-cli：github.com/xxoojs/fire…
weex-builder：github.com/weexteam/we…

tips: firefly-build即为weex-builder，是在weex-builder上做的扩展，纯属个人兴趣

npm install firefly-cli即可安装使用，用法和weex-builder一致

1. firefly-build如何成为一条命令？

npm全局安装之后可以使用firefly-build命令
本地调试在根目录下使用sudo npm link可以发布到全局进行测试

2. 项目叫firefly-cli，为何命令是firefly-build？

项目名称跟命令没有关系

一般在usr/local下有bin文件夹，存放的是指令 lib/node_modules文件夹，存放依赖包 npm包管理package.json中有个bin字段，用于配置执行指令：

"bin"： {
  "firefly-build": "bin/firefly-build.js"
}
复制代码

bin的命令文件firefly-build.js需要指定用何语言执行

#!/usr/bin/env node
复制代码

3. firefly-build为何后面可以跟两个参数src，dest，怎么接收

介绍一个插件commander

const program = require('commander');
program.version('1.0')
.option('-web', 'set web mode for h5 render')
.arguments('<source> <dest>')
.action(function(source, dest){
  //调用firefly-build
});
复制代码

question2. WeexBuilder.js干什么的？

两个主要方法initConfig, build

先聊一聊initConfig?

主要功能：组装webpack config

-proregss: webpack.ProgressPlugin(fn)
-min: webpack.optimize.UglifyJsPlugin

{  
  entry: [
    ？
  ],
  output: {
    path: ,
    filename: '[name].js'
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.join(process.cwd(), dir)
    }
  },
  resolveLoader: {
    alias: {
      'vue-loader': require.resolve('../lib/vue-loader-master/lib'),
      'weex-loader': require.resolve('../loaders/weex-loader-master')
    }
  }
}
复制代码

根据-web program.web来加载不同rules

{
  test: /\.vue(\?[^?]+)?$/,
  use: [{
    loader: 'weex-loader',
    options: vueLoaderConfig({ useVue: false })
  }]
}
复制代码

initConfig之banner-plugin?

可用于全局附加备注，或者代码

const plugins = [
  new webpack.BannerPlugin({
    banner: string,
    raw: boolean,
    entryOnly: boolean,
    include: string | RegExp | Array,
    exclude: string | RegExp | Array
  })
]
复制代码

再聊一聊build?

const compiler = webpack(webpackMerge(config, configs));
compiler.run((err, stats) => {
  callback && callback();
});
// or
compiler.watch({
  ignored: /node_modules/,
  poll: 1000
},(err, stats) => {
  callback && callback();
});
复制代码

weex本身提供了config的扩展，使用方式为

weex-builder --config ./webpackrc.js
复制代码

如有疑问可以发我邮件私聊

课后习题

entry怎么定义？
自己写一个webpack config模拟weex-builder，来实现打包

关于这两个题目写了一个demo，可以参考
github.com/xxoojs/weex…

参考资料

webpack.js.org/configurati…

webpack.github.io/docs/config…