项目中使用到了react-web, 有空记录下使用步骤.
react-web是淘宝前端团队开发的一个可以把react-native转换成web的工具, 大体上能实现了移动端的iOS/安卓/移动web这三端的代码共用. 当然细节上是充满了各种有解无解的坑.
-
GitHub文档: react-web
-
当前项目目录:
-
在iOS运行是这样的:
安装
-
安装命令行工具
react-web-cli
:npm install react-web-cli -g
-
在
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" }
-
项目目录下创建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;
-
项目目录下创建
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点几就好了.
- 如果发生报错
-
在浏览器上运行是这样的:
-
当前项目目录变成这样:
测试并打包 Web 版本代码
-
打包html:
react-web bundle
- 打包完成后,文件会存放在 web/output/ 目录下面.
- 安装有
http-server
工具的可以在output文件夹下命令http-server
, 再在浏览器输入http://127.0.0.1:8080/
就能看到了.
网友评论
执行react-web命令时,为何始终报这个错?