Weex 提供了一個命令行工具 weex-toolkit 來幫助開發者使用 Weex。它可以用來快速創建一個空項目、初始化 iOS 和 Android 開發環境、調試、安裝插件等操作。
目前 weex-toolkit 只支持創建 Vue.js 的項目。創建 Rax 的項目可以使用 rax-cli，參考 Rax 的官方網站 了解其用法。
一：初始化 （全局安裝 weex-toolkit）
請確保你已經安裝了 Node.js （可以參考React Native （0.57）開發環境搭建（過程記錄）中Node.js的安裝過程）
然后全局安裝 weex-toolkit。
命令如下：
npm install -g weex-toolkit
但是事與願違，報錯，並且很惡心，怎么搞都沒有辦法。
解決過程重點記錄：
可能是我使用了左邊的推薦的10.14.2版本（記不清了），導致“水土不服”。出現下面的問題：
1、警告
WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/weex-toolkit/node_modules/weex-builder/node_modules/fsevents):
WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 install: `node install`
WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1
WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules/weex-toolkit/node_modules/weex-previewer/node_modules/fsevents):
2、直接錯誤：
Tried to download(undefined): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.3/fse-v1.1.3-node-v64-darwin-x64.tar.gz
Pre-built binaries not found for fsevents@1.1.3 and node@10.14.2 (node-v64 ABI, unknown) (falling back to source compile with node-gyp)
ERR! node -v v10.14.2
node-gyp -v v3.8.0
not ok
build error
node -v v10.14.2
node-pre-gyp -v v0.6.39
not ok
。。。。
就是以上類似問題。
解決方案：
1、降低node的版本號：
npm install -g n
sudo n v8.11.3
install : node-v8.11.3
mkdir : /usr/local/n/versions/node/8.11.3
fetch : https://nodejs.org/dist/v8.11.3/node-v8.11.3-darwin-x64.tar.gz
######################################################################## 100.0%
installed : v8.11.3
$ node -v
v8.11.3
$ npm -v
5.6.0
安裝了node：v8.11.3 版本后，嘗試初始化，執行如下命令，並記錄過程：
$ npm install weex-toolkit -g
/usr/local/bin/weex -> /usr/local/lib/node_modules/weex-toolkit/bin/weex.js
> fsevents@1.1.3 install /usr/local/lib/node_modules/weex-toolkit/node_modules/weex-builder/node_modules/fsevents
> node install
[fsevents] Success: "/usr/local/lib/node_modules/weex-toolkit/node_modules/weex-builder/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
> fsevents@1.1.2 install /usr/local/lib/node_modules/weex-toolkit/node_modules/weex-previewer/node_modules/fsevents
> node install
[fsevents] Success: "/usr/local/lib/node_modules/weex-toolkit/node_modules/weex-previewer/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
> fsevents@1.1.3 install /usr/local/lib/node_modules/weex-toolkit/node_modules/weex-previewer/node_modules/weex-builder/node_modules/fsevents
> node install
[fsevents] Success: "/usr/local/lib/node_modules/weex-toolkit/node_modules/weex-previewer/node_modules/weex-builder/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
> fsevents@1.1.3 install /usr/local/lib/node_modules/weex-toolkit/node_modules/xtoolkit/node_modules/fsevents
> node install
[fsevents] Success: "/usr/local/lib/node_modules/weex-toolkit/node_modules/xtoolkit/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
+ weex-toolkit@1.3.11
added 463 packages and updated 1 package in 22.24s
整個過程沒有出現問題
2、升級到最新版本的node.js
接着剛才的去安裝最新的node.js
$ brew install node
Warning: node 11.4.0 is already installed, it's just not linked
You can use `brew link node` to link this version.
$ brew link node
Linking /usr/local/Cellar/node/11.4.0...
Error: Could not symlink bin/node
Target /usr/local/bin/node
already exists. You may want to remove it:
rm '/usr/local/bin/node'
To force the link and overwrite all conflicting files:
brew link --overwrite node
To list all files that would be deleted:
brew link --overwrite --dry-run node
果然node版本如下，沒有改變：
$ node -v
v8.11.3
$ npm -v
5.6.0
嘗試用下面的命令
$ sudo n v11.4.0
$ node -v
v11.4.0
$ npm -v
6.4.1
更新到最新的版本了。
$ npm install weex-toolkit -g
WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but npm-shrinkwrap.json was generated for lockfileVersion@0. I'll try to do my best with it!
WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but npm-shrinkwrap.json was generated for lockfileVersion@0. I'll try to do my best with it!
WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but npm-shrinkwrap.json was generated for lockfileVersion@0. I'll try to do my best with it!
/usr/local/bin/weex -> /usr/local/lib/node_modules/weex-toolkit/bin/weex.js
+ weex-toolkit@1.3.11
updated 229 packages in 20.484s
在最新的版本下面的時候，只剩余警告了。綜上所述，我覺的還是使用v8.11.3靠譜點。
二：初始化 （weex create awesome-app ）
npm install weex-toolkit -g
這條命令會向你命令行環境中注冊一個 weex 命令。你可以用 weex create 命令來創建一個空的模板項目：
$ weex create awesome-app
【我覺得上面的命令 awesome-app 可以隨便寫，例如 $ weex create yooweiweex 然后在確定Project name的時候，有一次機會：? Project name yooweiweex】
如下；
$ weex create awesome-app
? Project name yooweiweex 【可以自己指定，也可直接回車，按照括號中默認名字（注意這里的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters）】
? Project description test weex
? Author yoowei <wyhist2012@126.com>
? Select weex web render latest
? Babel compiler (https://babeljs.io/docs/plugins/#stage-x-experimental-presets) stage-0
? Use vue-router to manage your view router? (not recommended) Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
16:31:26 : Generated awesome-app
# Installing project dependencies ...
# ========================
但是可能是使用了node的最高版本，中間還是出現了很多錯誤和警告。我覺得有必要將node降到v8.11.3 使用
注意為了避免出現一些其他的亂七八糟的問題，我們還是按照下面的兩個注意事項去處理
1、前往/usr/local/lib/node_modules 目錄現將weex-toolkit 刪掉
2、回到根路徑/Users/galahad 然后再去執行：$ npm install weex-toolkit -g
$ cd /Users/galahad/Desktop/ziliao/weex
$ weex create yooweiweex
? Project name yooweiweex
? Project description A weex project
? Author yoowei <wyhist2012@126.com>
? Select weex web render latest
? Babel compiler (https://babeljs.io/docs/plugins/#stage-x-experimental-presets) stage-0
? Use vue-router to manage your view router? (not recommended) No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
16:51:33 : Generated yooweiweex
# Installing project dependencies ...
# ========================
WARN deprecated babel-preset-es2015@6.24.1: ???? Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
WARN deprecated text-encoding@0.6.4: no longer maintained
WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
> fsevents@1.2.4 install /Users/galahad/Desktop/ziliao/weex/yooweiweex/node_modules/fsevents
> node install
[fsevents] Success: "/Users/galahad/Desktop/ziliao/weex/yooweiweex/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
> phantomjs-prebuilt@2.1.16 install /Users/galahad/Desktop/ziliao/weex/yooweiweex/node_modules/phantomjs-prebuilt
> node install.js
PhantomJS not found on PATH
Download already available at /var/folders/rg/gmjp61bx0x95t4tjx2hh_3sr0000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip
Verified checksum of previously downloaded file
Extracting zip contents
Removing /Users/galahad/Desktop/ziliao/weex/yooweiweex/node_modules/phantomjs-prebuilt/lib/phantom
Copying extracted folder /var/folders/rg/gmjp61bx0x95t4tjx2hh_3sr0000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip-extract-1545123137579/phantomjs-2.1.1-macosx -> /Users/galahad/Desktop/ziliao/weex/yooweiweex/node_modules/phantomjs-prebuilt/lib/phantom
Writing location.js file
Done. Phantomjs binary available at /Users/galahad/Desktop/ziliao/weex/yooweiweex/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs
> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/galahad/Desktop/ziliao/weex/yooweiweex/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
> sinon@4.5.0 postinstall /Users/galahad/Desktop/ziliao/weex/yooweiweex/node_modules/sinon
> node scripts/support-sinon.js
Have some ❤️ for Sinon? You can support the project via Open Collective:
> https://opencollective.com/sinon/donate
notice created a lockfile as package-lock.json. You should commit this file.
WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none is installed. You must install peer dependencies yourself.
WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none is installed. You must install peer dependencies yourself.
added 1692 packages in 44.856s
Running eslint --fix to comply with chosen preset rules...
# ========================
> yooweiweex@1.0.0 lint /Users/galahad/Desktop/ziliao/weex/yooweiweex
> eslint --ext .js,.vue src test/unit --fix
Success! Created yooweiweex at /Users/galahad/Desktop/ziliao/weex/yooweiweex
Inside that directory, you can run several commands:
npm start
Starts the development server for you to preview your weex page on browser
You can also scan the QR code using weex playground to preview weex page on native
npm run dev
Open the code compilation task in watch mode
npm run ios
(Mac only, requires Xcode)
Starts the development server and loads your app in an iOS simulator
npm run android
(Requires Android build tools)
Starts the development server and loads your app on a connected Android device or emulator
npm run pack:ios
(Mac only, requires Xcode)
Packaging ios project into ipa package
npm run pack:android
(Requires Android build tools)
Packaging android project into apk package
npm run pack:web
Packaging html5 project into `web/build` folder
npm run test
Starts the test runner
To get started:
cd yooweiweex
npm start
Enjoy your hacking time!
命令執行完以后，在當前目錄的 awesome-app 文件夾里就有了一個空的 Weex + Vue.js 項目。
三：開發
下一步就是進入剛剛創建的文件夾，並且安裝依賴，然后執行 npm start：
cd yooweiweex
npm install
npm start
然后工具會啟動一個本地的 web 服務，監聽 8081 端口。你可以打開 http://localhost:8081 查看頁面在 Web 下的渲染效果。 源代碼在 src/ 目錄中，你可以像一個普通的 Vue.js 項目一樣來開發.
除此之外，你還可以打開 http://localhost:8081/preview.html 開啟一個預覽頁面，它會把 web 端的頁面放在一個 iframe 中渲染，而且在右側生成一個二維碼。用 Weex playground app 掃描這個二維碼可以看到頁面在手機上渲染的真實效果。
四：編譯和運行
默認情況下 weex create 命令並不初始化 iOS 和 Android 項目，你可以通過執行 weex platform add 來添加特定平台的項目。
weex platform add ios
weex platform add android
由於網絡環境的不同，安裝過程可能需要一些時間，請耐心等待。如果安裝失敗，請確保自己的網絡環境暢通。
$ cd /Users/galahad/Desktop/ziliao/weex/yooweiweex
$ weex platform add ios
17:13:20 : Adding ios weexpack-ios@4.1.6 ...
17:13:20 : Success!
$ weex platform add android
17:16:23 : Adding android weexpack-android@6.3.17 ...
17:16:23 : Success!
為了能在本地機器上打開 Android 和 iOS 項目，你應該配置好客戶端的開發環境。對於 iOS，你應該安裝並且配置好 Xcode。對於 Android，你應該安裝並且配置好 Android Studio。當開發環境准備就緒后，運行下面的命令，可以在模擬器或真實設備上啟動應用：
當然還是在$ cd /Users/galahad/Desktop/ziliao/weex/yooweiweex這個目錄下面：
weex run ios
weex run android
weex run web
五：調試
weex-toolkit 還提供了強大的調試功能，只需要執行：
weex debug
這條命令會啟動一個調試服務，並且在 Chrome （目前只支持基於 V8 引擎的桌面瀏覽器） 中打開調試頁面。詳細用法請參考 weex-toolkit 的文檔。