react-web使用

七牛的图片在这里居然显示不了... 可以到简书上看图

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

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

• GitHub文档: react-web

• 官方的教程: 三步将 React Native 项目运行在 Web 浏览器上面

• 当前项目目录:

• 在iOS运行是这样的:

安装

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/]
       },loader: 'babel',query: {
           presets: ['react-native','stage-1']
         },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 版本代码

• 打包html: react-web bundle

  • 打包完成后，文件会存放在 web/output/ 目录下面.

  • 安装有http-server工具的可以在output文件夹下命令http-server,再在浏览器输入http://127.0.0.1:8080/就能看到了.

本例代码 GitHub

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!