Ray-rn2web NPM

ray-rn2web

descr

基于 webpack 的构建封装.

特性

基于 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.html root 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>