深入淺出weex-builder

wejoy_whoami發表於2019-02-15
UI

從幾個問題來深入淺出一下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…

相關文章