ray-rn2web
v2.0.0
Published
the FED tool for amos team RN to web
Readme
ray-rn2web
descr
基于 webpack 的构建封装.
author
ilex.h
特性
- 基于 webpack 实现
- 支持通过
webpack.config.js进行扩展 webpack 的配置项 - 将RN转化为web
useage
- install
$ npm install --save-dev ray-rn2web- setup webpack.config.js
// webpack.config.js
const rn2webConfig = require('ray-rn2web/lib/simpleConfig');
module.exports = rn2webConfig();
// 注意： 开发环境下，需要修改 toFile 和 tpl 模板，默认选择 root dir/tpl.html output： dist/index.html
// 修改为
var options = {
tpl: './tpl.html',
toFile: 'index.html'
...
}
// 可采用如下方式进行 dev and prod
var options = {
alias: alias
};
if('development' === _ENV_){
options.tpl = './tpl.html';
options.toFile = 'index.html';
options.sourceMap = true;
options.port = 3003;
}
// full custom options
var options = {
tpl: '',
toFile: '',
htmlChunks: [ '', '' ],
port: 3003,
alias: alias,
sourceMap: true
};
// 可自定义设置 htmlWebpackConfig
// var options = {
// tpl: '',
// toFile: '',
// htmlChunks: `string or array`
// }
// other html, add a new plugin
// const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = rn2webConfig(options);
// new version
// 采用新版本的打包
const rn2webConfig = require('ray-rn2web/lib/rn2webConfig');
- add
tpl.htmlroot dir
<!DOCTYPE html>
<html lang="en">
<head>
<title>ilex.h</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="__web-root__"></div>
</body>
</html>附录
完整配置, webpack.config.js
const { OpenUrlPlugins, browser, tools } = require('ray-plugins');
const rn2webConfig = require('ray-rn2web/lib/simpleConfig');
var _ENV_ = tools.trim(process.env.NODE_ENV) || 'development';
var alias = {
'amos-rn-pro': './src'
};
// custom options
var options = {
alias: alias
};
if('development' === _ENV_){
options.tpl = './tpl.html';
options.toFile = 'index.html';
options.sourceMap = true;
options.port = 3003;
}
var defaultConfig = rn2webConfig(options);
defaultConfig.entry = {
app: './src/index.js'
};
if('development' === _ENV_){
defaultConfig.plugins.push(
new OpenUrlPlugins({url: 'http://localhost:' + options.port, browser: browser.chrome}) // browser.chrome | browser.firefox
);
}
module.exports = defaultConfig;package.json
{
...
"scripts": {
"start:web": "set NODE_ENV=development && webpack-dev-server"
...
}
...
}tpl.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>ray rn to web</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
</body>
</html>目录结构
|-- node_modules
|-- src
|--index.js
|--
|--
|-- package.json
|-- webpack.config.js
|--...
License
MIT
changelog
2020-5-21 v2.0.0
update [email protected]、[email protected]、babel@7