打包工具:webpack
主要依赖包: react-web, babel, react,react-dom....
webpack.config.js代码:
'use strict'; var fs = require('fs'); 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'; var JsonObj=JSON.parse(fs.readFileSync(path.join(ROOT_PATH, 'module_map.json'))); let isProd = NODE_ENV === 'production'; var config = { paths: { src: path.join(ROOT_PATH, '.'), index: path.join(ROOT_PATH, 'index.ios'), }, }; var aliasObj = JsonObj; aliasObj['react-native'] = 'react-web'; module.exports = { ip: IP, port: PORT, devtool: 'source-map', resolve: { alias: aliasObj, extensions: ['', '.js', '.jsx'], }, entry: isProd? { // tweak this to include your externs unless you load them some other way 'react-web': ['react-native'], 'index': config.paths.index }: [ 'webpack-dev-server/client?http://' + IP + ':' + PORT, 'webpack/hot/only-dev-server', 'react-web', config.paths.index ], output: { path: path.join(__dirname, 'output'), filename: '[name].js', sourceMapFilename: '[file].map', }, plugins: [ new HasteResolverPlugin({ platform: 'web', blacklist: ['pages', 'lib'], }), new webpack.DefinePlugin({ 'process.env': { // This has effect on the react lib size 'NODE_ENV': JSON.stringify('production'), } }), new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, }), new webpack.optimize.CommonsChunkPlugin('react-web', 'react-web.js'), new HtmlPlugin({ filename: 'index.html', hash: true, title: 'indexTitle', chunks: ['react-web', 'index'] }), ], module: { loaders: [ { test: /\.jsx?$/, loaders: ['babel?compact=false&presets[]=react,presets[]=es2015','jsx'], include: [config.paths.src], //loaders: ['babel', 'jsx'], //exclude: [/node_modules/] }, /* { test: /\.json$/, loader: 'json', }, { test: /\.jsx?$/, loaders: ['react-hot', 'babel'], include: [config.paths.src], exclude: [/node_modules/] }*/ ] } };
相关推荐
react-native-web-linear-gradient 用于Web实现React-native-linear-gradient的React Native 入门 $ npm install react-native-web-linear-gradient --save 别名打包您的webpack配置中: resolve: { alias: { ...
NULL 博文链接:https://jm1999.iteye.com/blog/2357463
react-native-web-webview React Native用于RN的WebView的Web实现 入门 $ npm install react-native-web-webview --save 别名打包您的webpack配置中: resolve: { alias: { 'react-native': 'react-native-web...
React三个纤维本机的网站尽管您可以使用 Webpack 做到这一点,但 React Native 中包含的器做得更好,并且它已融入 。 这种类型的构建只能用作兼容性的最后手段。 一个react-three-fiber的示例有: 网络包 5 React本...
react-native-web-maps React Native在Web上实现react-native-maps 入门 $ npm install react-native-web-maps --save 为了实现react-native-web-maps我们使用react-google-maps包: $ npm install react-google-...
react-native-web-lists React Native用于列表的Web实现 该软件包使用旧版实现(ListView)。 入门 $ npm install react-native-web-lists --save 别名打包您的webpack配置中: resolve: { alias: { 'react-...
为React Native和Storybook一起构建UI库是一个很好的体验,但是很难在Web上显示组件,因此我想通过react-native-web项目转换react-native组件,以便我可以轻松地显示它们在网上。 这是最终的库开发设置,旨在启动...
像哺乳动物/ react-native-redux-webpack-example 易于复制的react-native-redux-webpack代码库示例,用于分发React组件。发展npm run dev运行示例cd example/; npm run dev打开以查看示例测验npm test执照用 :...
安装npm install react-native-electron electron , react和react-native-web是必需的对等依赖项,请确保也安装它们: npm install electron react react-native-web 如果使用ART还需要react-art 。例请参阅example...
React本机+ Web样板终极React Native + Web样板该样板是在React Native和React Native Web之上创建的。 这个想法是创建具有无缝开发经验和可共享代码库的项目,以响应本机和React本机Web。关键特点使用清除项目结构...
npm i preact-responder-event-plugin react-native-web preact@next或者 yarn add preact-responder-event-plugin react-native-web preact@next用法您需要做的就是在webpack配置中添加一些别名,以隐式替换react-...
有用到处都ReactNative 简单没有任务管理器( create-react-app和create-react-native-app代替Webpack,Gulp和Grunt) 没有网络托管(静态Github页面而不是网络服务) 可扩展性 解耦 时分双工 离线优先 DX Redux...
用于react-native for web的webpack 图片加载器 支持web端根据devicePixelRatio 来加载@1x @1.5x @2x @3x @4x 例如: require('image/a.jpg'); --> images/a@1x.jpg ..... 或者 require('image!x') 二、安装 npm ...
Web + React Router 4 Reason React本机Web示例Reason使用ReactReact的内置路由器,带有Razzle的SSR安装,React + React Native Web git clone [电子邮件保护]:jaredpalmer / reason-react-native -web-example.git...
使用react-native-web在网络上运行 使用electron在桌面上运行 发展历程 用Jest测试 绝对导入路径 用于JS,TS,字体,文件的Webpack加载器 使用Flipper的本机调试器:reactotron,redux-debugger等 用于Web的...
尽管我为react-native构建了此模块,但它在Web上的效果也一样。 这个项目的目的 简约的API 最小的依赖 仅使用官方的React API 已知的问题 尽量不要让falsy 0或''通过。 (͡°͜ʖ͡°) 完全相同name的...
它包括许多琐碎的“演示”应用程序,这些应用程序展示了可以针对所有平台的React Native组件。 利用 规范标准 该项目使用了一些ES7功能和建议,例如箭头功能,休息/展开(...)和功能绑定(::)。 通天塔用于转运。...
在您的webpack配置中,将react-native包别名为react-web包: // webpack.config.js module . exports = { resolve : { alias : { 'react-native' : 'react-web' } } } 使用React Native API编写您的应用程序 ...
该存储库是 react-native优化的预定义规则集,使您可以轻松地react-native组件创建每个项目的UI文档。 相同CheckBox组件故事的示例react-native-elements网络和本机渲染。 哲学 一组用于创建基于项目的组件库的...