react-web使用

作者: hello老文 | 来源:发表于2017-03-09 21:58 被阅读3045次

    项目中使用到了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 版本代码

    • 打包html: react-web bundle

      • 打包完成后,文件会存放在 web/output/ 目录下面.
      • 安装有http-server工具的可以在output文件夹下命令http-server, 再在浏览器输入http://127.0.0.1:8080/就能看到了.

    本例代码 GitHub

    相关文章

      网友评论

      • 李肥肥www:`react-web-cli` is deprecated, use `create-react-app` and `react-app-rewstead.
        执行react-web命令时,为何始终报这个错?
        90c337cc3254:@W_91fe 我弄虚拟机弄好了 不用web了
        李肥肥www:@君子好逑i 没呢,我放弃web调试了,现在把rn集成到原生里面,遇到这个错误,SyntaxError: Strict mode does not allow function declarations in a lexically nested statement.
        90c337cc3254:解决了吗?
      • afeiship:KPI 的产物,慎用...
      • 一wei渡江:这个您后续还有没有尝试, 淘宝前端好像好久没有更新了
        一wei渡江:@hello老文 这个坑应该也挺多的吧, 昨天用react-native-web试了一下转web,转了一个很简单的页面,发现样式有问题
        hello老文:去年做微信端用过一次就没再用过了

      本文标题:react-web使用

      本文链接:https://www.haomeiwen.com/subject/ksvggttx.html