脚本宝典收集整理的这篇文章主要介绍了react-web使用,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
七牛的图片在这里居然显示不了... 可以到简书上看图
项目中使用到了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
就能看到了.
-
在浏览器上运行是这样的:
-
当前项目目录变成这样:
测试并打包 Web 版本代码
-
打包html: react-web bundle
打包完成后,文件会存放在 web/output/ 目录下面.
安装有http-server
工具的可以在output文件夹下命令http-server
, 再在浏览器输入http://127.0.0.1:8080/
就能看到了.
以上是脚本宝典为你收集整理的react-web使用全部内容,希望文章能够帮你解决react-web使用所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。