weex踩坑之旅第一彈 ~ 搭建具備入口文件的weex腳手架

寫在前面的話：

注意！該文檔是2017年年末的文章，那個時候weex還有不少問題，如今weex已經全面更新，文檔也比較全。下面的講解可能不太適應新的weex框架，後面我會再立貼講解。謝謝各位關注。

weex官方文檔不完善，在整個實施過程當中遇到過不少坑，中途幾回想放棄，老是有些不甘心。攻堅克難，總也是會有一些收穫，先將收穫進行分享也或是記錄，防止忘記。要想用好weex必須對es5/es6基礎，vue體系，打包工具webpack有較深的瞭解；對ios，android有了解。

官方提供的weex腳手架不能指定入口文件，若是咱們想要在項目中使用vuex,vue-router，沒有入口文件將會變得比較複雜。那麼該如何搭建具備入口文件的腳手架呢？首先，咱們先把官方提供的腳手架使用一下，而後再其基礎上進行修改

一. 初始化weex項目

$ weex init helloweex

二. 安裝依賴包

$ cd helloweex
$ npm install
或者可使用淘寶鏡像安裝
$ cnpm install

**注意！若是使用npm安裝依賴，建議先手動建立node_modules目錄再進行安裝，避免後期出現權限不足的問題**

三. 在瀏覽器中進行測試

注意！在瀏覽器中顯示成功並不意味着在本地就能夠顯示成功！由於這是兩個不一樣的執行環境。
$ npm run serve

四. 此時會遇到第一個坑

緣由：

https://www.npmjs.com/package/uglifyjs-webpack-plugin
   
解決方案：
1）安裝 uglifyjs-webpack-plugin
    $ cnpm i -D uglifyjs-webpack-plugin
2) 應用
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    module.exports = {
      plugins: [
        new UglifyJsPlugin()
      ]
    }

3) 從新部署，再也不報錯！

五. 模擬器上運行

若是以前步驟能夠完成，只能說明當前代碼在瀏覽器上能夠執行，能不能本地運行還須要再進行測試。要想本地測試必須安裝模擬器（ios或android），本文章不提供具體的安裝過程，若有須要，請自行查看其它文章。
本章以ios環境爲例進行測試
依次執行以下命令
1) 安裝ios平臺
    $ weex platform add ios

2) 安裝依賴
    $ cd platforms/ios
    $ pod install

3) 運行
    $ cd ../..
    $ weex run ios (次過程較慢，需等待一會)
4) 選擇運行環境後啓動模擬器

六. 編寫代碼

查看webpack.config.js得知會，該腳手架會根據src下vue文件產生一個對應的.js文件存放到demo目錄下，可是傳統的vue開發，咱們都但願有個入口文件（main.js或者entry.js）,而後在該文件中導入其餘模塊，進行頁面的整體配置等操做。

那麼，咱們應該如何使得當前項目具備入口文件呢？答案是隻能修改webpack.config.js文件。

1）添加入口文件配置

2) 刪除多餘配置信息
刪除getEntryFileContent函數
刪除walk函數
刪除walk() walk函數的調用

3) 在src目錄下添加主vue,App.vue

4) 在src目錄下添加入口文件entry.js，而且刪除temp目錄

5) 在瀏覽器中進行測試
    $ npm run serve

6) 在ios模擬器上進行測試
    $ weex run ios

7) 若是發現打包後的文件不叫index.js能夠修改webpack.config.js

8）解決頁面沒法覆蓋整個屏幕的問題
須要在原生代碼中進行簡單的修改