React-native 转换为 web 项目

Question

版本

• react: xx ~ 16.8.3
• react-native: 0.55 ~ 0.59.10
• react-native-web: 0.10.0-alpha.2

---

{
  "name": "App",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-art": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-mobile-datepicker": "^4.0.1",
    "react-native": "0.59.10",
    "react-native-code-push": "5.6.0",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-keyboard-aware-scroll-view": "^0.5.0",
    "react-native-md5": "^1.0.0",
    "react-native-plugin-zhugeio": "^1.1.2",
    "react-native-popup-dialog": "^0.18.0",
    "react-native-scrollable-tab-view": "^0.8.0",
    "react-native-simple-store": "^1.3.0",
    "react-native-swiper": "^1.5.13",
    "react-native-web": "^0.10.0-alpha.2",
    "react-native-web-webview": "^0.2.8",
    "react-navigation": "^3.8.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "weixin-js-sdk": "^1.4.0-test"
  },
  "devDependencies": {
    "babel": "6.23.0",
    "babel-core": "6.26.0",
    "babel-jest": "^24.8.0",
    "babel-loader": "7.1.4",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-plugin-react-native-web": "^0.9.9",
    "babel-plugin-react-transform": "3.0.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "metro-react-native-babel-preset": "0.54.1",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "babel-preset-react-native": "4.0.1",
    "babel-preset-stage-0": "6.24.1",
    "css-loader": "^2.0.2",
    "file-loader": "^4.0.0",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.8.0",
    "react-native-web-image-loader": "0.0.6",
    "react-test-renderer": "16.0.0-alpha.6",
    "redux-devtools": "^3.4.1",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14",
    "webpack-merge": "^4.2.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

web / h5 / 微信公众号

react-native-web 生成 h5 需要添加哪些库？webpack 打包需要哪些库，进行支持运行？

---

react-native-web

yarn add react-native-web

webpack

yarn add webpack --dev
# 依赖库 - 可选安装 
yarn add babel-loader --dev
yarn add style-loader --dev
yarn add css-loader --dev 
yarn add url-loader --dev
yarn add react-native-web-image-loader --dev

webpack-merge

对多个 Webpack配置 进行合并

yarn add webpack-merge  --dev
# 依赖库 - 必须
yarn add react-dom  --dev

webpack-dev-server

将 webpack 与提供实时 重新加载 的开发服务器一起使用。这应该仅用于开发。

yarn add webpack-dev-server --dev

#------------------------------------------
# info Direct dependencies
└─ webpack-dev-server@3.7.2
# info All dependencies
├─ @types/events@3.0.0
├─ @types/glob@7.1.1
├─ @types/minimatch@3.0.3
├─ @types/node@12.6.9
├─ ansi-html@0.0.7
├─ array-flatten@1.1.1
├─ array-union@1.0.2
├─ array-uniq@1.0.3
├─ async@1.5.2
├─ batch@0.6.1
├─ body-parser@1.19.0
├─ bonjour@3.5.0
├─ buffer-indexof@1.1.1
├─ connect-history-api-fallback@1.6.0
├─ content-disposition@0.5.3
├─ cookie-signature@1.0.6
├─ cookie@0.4.0
├─ deep-equal@1.0.1
├─ default-gateway@4.2.0
├─ del@4.1.1
├─ detect-node@2.0.4
├─ dns-equal@1.0.0
├─ dns-packet@1.3.1
├─ dns-txt@2.0.2
├─ eventsource@1.0.7
├─ express@4.17.1
├─ faye-websocket@0.10.0
├─ follow-redirects@1.7.0
├─ forwarded@0.1.2
├─ globby@6.1.0
├─ handle-thing@2.0.0
├─ hpack.js@2.1.6
├─ html-entities@1.2.1
├─ http-deceiver@1.2.7
├─ http-parser-js@0.4.10
├─ http-proxy-middleware@0.19.1
├─ http-proxy@1.17.0
├─ internal-ip@4.3.0
├─ ip-regex@2.1.0
├─ ipaddr.js@1.9.1
├─ is-path-cwd@2.2.0
├─ is-path-in-cwd@2.1.0
├─ is-path-inside@2.1.0
├─ json3@3.3.3
├─ killable@1.0.1
├─ loglevel@1.6.3
├─ media-typer@0.3.0
├─ merge-descriptors@1.0.1
├─ multicast-dns-service-types@1.1.0
├─ multicast-dns@6.2.3
├─ node-forge@0.7.5
├─ obuf@1.1.2
├─ opn@5.5.0
├─ original@1.0.2
├─ p-map@2.1.0
├─ p-retry@3.0.1
├─ path-is-inside@1.0.2
├─ path-to-regexp@0.1.7
├─ portfinder@1.0.21
├─ proxy-addr@2.0.5
├─ querystringify@2.1.1
├─ raw-body@2.4.0
├─ retry@0.12.0
├─ select-hose@2.0.0
├─ selfsigned@1.10.4
├─ serve-index@1.9.1
├─ sockjs-client@1.3.0
├─ sockjs@0.3.19
├─ spdy-transport@3.0.0
├─ spdy@4.0.1
├─ thunky@1.0.3
├─ type-is@1.6.18
├─ wbuf@1.7.3
├─ webpack-dev-middleware@3.7.0
├─ webpack-dev-server@3.7.2
└─ websocket-extensions@0.1.3

html-webpack-plugin

简化 HTML 文件的创建，为 Webpack 捆绑包 提供服务

yarn add html-webpack-plugin --dev

#------------------------------------------
# info Direct dependencies
└─ html-webpack-plugin@3.2.0
# info All dependencies
├─ camel-case@3.0.0
├─ clean-css@4.2.1
├─ css-select@1.2.0
├─ css-what@2.1.3
├─ dom-converter@0.2.0
├─ domhandler@2.4.2
├─ domutils@1.5.1
├─ entities@1.1.2
├─ he@1.2.0
├─ html-minifier@3.5.21
├─ html-webpack-plugin@3.2.0
├─ htmlparser2@3.10.1
├─ lower-case@1.1.4
├─ nth-check@1.0.2
├─ param-case@2.1.1
├─ pretty-error@2.1.1
├─ relateurl@0.2.7
├─ renderkid@2.0.3
├─ toposort@1.0.7
├─ uglify-js@3.4.10
└─ upper-case@1.1.3

yarn add babel-plugin-react-native-web --dev

# A Babel plugin that will alias `react-native` to `react-native-web` and exclude
# any modules not required by your app (keeping bundle size down).
# (一个babel插件，它会将react native别名为react native web，并排除应用程序不需要的任何模块
#  （保持bundle的大小较低）。)

#--------------------------------------------------------------------

# 注意 - 注意 - 注意 - (使用其中一个)
yarn add babel-preset-react-native --dev # rn_version < 0.57
yarn add metro-react-native-babel-preset --dev # rn_version >= 0.57
# https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset

#--------------------------------------------------------------------

yarn add babel-preset-react --dev

yarn add babel-preset-es2015 --dev
# ES6生成器函数将始终被转换为复杂的ES5代码

yarn add babel-preset-stage-0 --dev
# stage-x和上面的es2015等有些类似，但是它是按照JavaScript的提案阶段区分的，一共有5个阶段。
# 而数字越小，阶段越靠后，存在依赖关系。也就是说stage-0是包括stage-1的，以此类推。