項(xiàng)目中使用到了react-web, 有空記錄下使用步驟.

react-web是淘寶前端團(tuán)隊(duì)開發(fā)的一個(gè)可以把react-native轉(zhuǎn)換成web的工具, 大體上能實(shí)現(xiàn)了移動(dòng)端的iOS/安卓/移動(dòng)web這三端的代碼共用. 當(dāng)然細(xì)節(jié)上是充滿了各種有解無解的坑.

• GitHub文檔: react-web

• 官方的教程: 三步將 React Native 項(xiàng)目運(yùn)行在 Web 瀏覽器上面

• 當(dāng)前項(xiàng)目目錄:

  

• 在iOS運(yùn)行是這樣的:

  

安裝

1. 安裝命令行工具react-web-cli: npm install react-web-cli -g

2. 在package.json文件里添加以下內(nèi)容后npm install

   "dependencies": {
       ...
       "react-dom": "15.3.x",
       "react-web": "0.4.6"
   },
   "devDependencies": {
       ...
       
       "babel-loader": "^6.2.5",
      "babel-preset-react-native": "^1.9.0",
      "babel-preset-stage-1": "^6.16.0",
      "haste-resolver-webpack-plugin": "^0.2.2",
      "json-loader": "^0.5.4",
      "react-hot-loader": "^1.3.0",
      "webpack": "^1.13.2",
      "webpack-dev-server": "^1.16.1",
      "webpack-html-plugin": "^0.1.1"
   }
   

3. 項(xiàng)目目錄下創(chuàng)建web文件夾, 里面創(chuàng)建webpack.config.js文件, 內(nèi)容:

   'use strict';
   
   var path = require('path');
   var webpack = require('webpack');
   var HtmlPlugin = require('webpack-html-plugin');
   var HasteResolverPlugin = require('haste-resolver-webpack-plugin');
   
   var IP = '0.0.0.0';
   var PORT = 3000;
   var NODE_ENV = process.env.NODE_ENV;
   var ROOT_PATH = path.resolve(__dirname, '..');
   var PROD = 'production';
   var DEV = 'development';
   let isProd = NODE_ENV === 'production';
   
   var config = {
     paths: {
       src: path.join(ROOT_PATH, '.'),
       index: path.join(ROOT_PATH, 'index.web'),
     },
   };
   
   var webpackConfig = {
     ip: IP,
     port: PORT,
     devtool: 'cheap-module-eval-source-map',
     resolve: {
       alias: {
         'react-native': 'ReactWeb',
       },
       extensions: ['', '.js', '.web.js', '.ios.js', '.android.js', '.native.js', '.jsx'],
     },
     entry: isProd ? [
       config.paths.index
     ] : [
       'webpack-dev-server/client?http://' + IP + ':' + PORT,
       'webpack/hot/only-dev-server',
       config.paths.index,
     ],
     output: {
       path: path.join(__dirname, 'output'),
       filename: 'bundle.js'
     },
     plugins: [
       new HasteResolverPlugin({
         platform: 'web',
         nodeModules: ['react-web']
       }),
       new webpack.DefinePlugin({
         'process.env': {
           'NODE_ENV': JSON.stringify(isProd ? PROD : DEV),
         }
       }),
       isProd ? new webpack.ProvidePlugin({
         React: 'react'
       }) : new webpack.HotModuleReplacementPlugin(),
       new webpack.NoErrorsPlugin(),
       new HtmlPlugin(),
     ],
     module: {
       loaders: [{
         test: /\.json$/,
         loader: 'json',
       }, {
         test: /\.jsx?$/,
         loader: 'react-hot',
         include: [config.paths.src],
         exclude: [/node_modules/]
       }, {
         test: /\.jsx?$/,
         loader: 'babel',
         query: {
           presets: ['react-native', 'stage-1']
         },
         include: [config.paths.src],
         exclude: [path.sep === '/' ? /(node_modules\/(?!react-))/ : /(node_modules\\(?!react-))/]
       }]
     }
   };
   webpackConfig.resolve.alias[path.basename(ROOT_PATH, '.')] = path.join(ROOT_PATH, '.');
   
   module.exports = webpackConfig;
   

4. 項(xiàng)目目錄下創(chuàng)建index.web.js文件, 把index.ios.js內(nèi)容copy過來, 在最后加上以下代碼:

   if (Platform.OS == 'web') {
     var app = document.createElement('div');
     document.body.appendChild(app);
     AppRegistry.runApplication('Helloworld', {
       rootTag: app
     });
   }
   

5. 在項(xiàng)目目錄下命令react-web start, 成功后在瀏覽器打開http://localhost:3000就能看到了.

   • 如果發(fā)生報(bào)錯(cuò) ERROR in Path must be a string. Received undefined, 是因?yàn)槟愕膎ode版本太高,使用node 5點(diǎn)幾 4點(diǎn)幾就好了.

• 在瀏覽器上運(yùn)行是這樣的:

  

• 當(dāng)前項(xiàng)目目錄變成這樣:

  

測(cè)試并打包 Web 版本代碼

• 打包html: react-web bundle

  • 打包完成后，文件會(huì)存放在 web/output/ 目錄下面.
  • 安裝有http-server工具的可以在output文件夾下命令http-server, 再在瀏覽器輸入http://127.0.0.1:8080/就能看到了.
  

本例代碼 GitHub