React NativeReact Native学习React Native

react-web使用

2017-03-09  本文已影响3045人  hello老文

项目中使用到了react-web, 有空记录下使用步骤.

react-web是淘宝前端团队开发的一个可以把react-native转换成web的工具, 大体上能实现了移动端的iOS/安卓/移动web这三端的代码共用. 当然细节上是充满了各种有解无解的坑.

安装

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

  2. package.json文件里添加以下内容后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. 项目目录下创建web文件夹, 里面创建webpack.config.js文件, 内容:

    '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. 项目目录下创建index.web.js文件, 把index.ios.js内容copy过来, 在最后加上以下代码:

    if (Platform.OS == 'web') {
      var app = document.createElement('div');
      document.body.appendChild(app);
      AppRegistry.runApplication('Helloworld', {
        rootTag: app
      });
    }
    
  5. 在项目目录下命令react-web start, 成功后在浏览器打开http://localhost:3000就能看到了.

    • 如果发生报错 ERROR in Path must be a string. Received undefined, 是因为你的node版本太高,使用node 5点几 4点几就好了.

测试并打包 Web 版本代码

本例代码 GitHub

上一篇下一篇

猜你喜欢

热点阅读