初始化Weex项目遇到的问题记录

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版本（记不清了），致使“水土不服”。出现下面的问题：

一、警告

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):

二、直接错误：

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 

。。。。

 

就是以上相似问题。

解决方案：

一、下降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

整个过程没有出现问题

二、升级到最新版本的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 使用

注意为了不出现一些其余的乱七八糟的问题，咱们仍是按照下面的两个注意事项去处理
一、前往/usr/local/lib/node_modules 目录现将weex-toolkit 删掉

二、回到根路径/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 的文档。