react-web使用

時間 2019-11-07

標籤 react web 使用欄目 React 简体版

原文原文鏈接

七牛的圖片在這裏竟然顯示不了... 能夠到簡書上看圖html

項目中使用到了react-web, 有空記錄下使用步驟.前端

react-web是淘寶前端團隊開發的一個能夠把react-native轉換成web的工具, 大致上能實現了移動端的iOS/安卓/移動web這三端的代碼共用. 固然細節上是充滿了各類有解無解的坑.node

GitHub文檔: react-webreact
官方的教程: 三步將 React Native 項目運行在 Web 瀏覽器上面android
當前項目目錄:webpack

在iOS運行是這樣的:ios

安裝

安裝命令行工具react-web-cli: npm install react-web-cli -ggit

在package.json文件裏添加如下內容後npm installgithub

"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"
}

項目目錄下建立web文件夾, 裏面建立webpack.config.js文件, 內容:web

'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;

項目目錄下建立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
  });
}

在項目目錄下命令react-web start, 成功後在瀏覽器打開http://localhost:3000就能看到了.
- 若是發生報錯 ERROR in Path must be a string. Received undefined, 是由於你的node版本過高,使用node 5點幾 4點幾就行了.