From 46e77d0b00f616d1a17160d98482df46adf5008d Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 30 Dec 2017 21:00:20 -0800 Subject: [PATCH] Change babel presets Tune the compiled output to reduce file size. --- .babelrc | 30 ++++++++++- package.json | 5 ++ packages/benchmarks/webpack.config.js | 8 ++- packages/react-native-web/package.json | 1 + packages/react-native-web/src/index.js | 4 +- packages/react-native-web/src/module.js | 72 ------------------------- website/guides/getting-started.md | 20 ++----- website/package.json | 1 + yarn.lock | 2 +- 9 files changed, 49 insertions(+), 94 deletions(-) diff --git a/.babelrc b/.babelrc index 2e2e0fb3..69f760fd 100644 --- a/.babelrc +++ b/.babelrc @@ -1,8 +1,34 @@ { "presets": [ - "react-native" + [ + "babel-preset-env", + { + "loose": true, + "exclude": ["transform-es2015-typeof-symbol"], + "targets": { + "browsers": [ + "chrome 38", + "android 4", + "firefox 40", + "ios_saf 7", + "safari 7", + "ie 10", + "ie_mob 11", + "edge 12", + "opera 16", + "op_mini 12", + "and_uc 9", + "and_chr 38" + ] + } + } + ], + "babel-preset-react", + "babel-preset-flow" ], "plugins": [ - [ "transform-react-remove-prop-types", { "mode": "wrap" } ] + ["babel-plugin-transform-class-properties", { "loose": true }], + ["babel-plugin-transform-object-rest-spread", { "useBuiltIns": true }], + ["babel-plugin-transform-react-remove-prop-types", { "mode": "wrap" } ] ] } diff --git a/package.json b/package.json index 2f2f0415..28557062 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,12 @@ "babel-core": "^6.26.0", "babel-eslint": "^8.0.3", "babel-loader": "^7.1.2", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-react-remove-prop-types": "^0.4.10", + "babel-preset-env": "^1.6.1", + "babel-preset-flow": "^6.23.0", + "babel-preset-react": "^6.24.1", "babel-preset-react-native": "^4.0.0", "caniuse-api": "^2.0.0", "del-cli": "^1.1.0", diff --git a/packages/benchmarks/webpack.config.js b/packages/benchmarks/webpack.config.js index ec1229c8..8404de70 100644 --- a/packages/benchmarks/webpack.config.js +++ b/packages/benchmarks/webpack.config.js @@ -2,11 +2,13 @@ const path = require('path'); const webpack = require('webpack'); +const appDirectory = path.resolve(__dirname); + module.exports = { context: __dirname, entry: ['babel-polyfill', './src/index'], output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(appDirectory, 'dist'), filename: 'performance.bundle.js' }, module: { @@ -23,7 +25,9 @@ module.exports = { }, { test: /\.js$/, - exclude: /node_modules/, + include: [ + path.resolve(appDirectory, 'src'), + ], use: { loader: 'babel-loader', options: { diff --git a/packages/react-native-web/package.json b/packages/react-native-web/package.json index 0f85d3a4..00cd58b9 100644 --- a/packages/react-native-web/package.json +++ b/packages/react-native-web/package.json @@ -3,6 +3,7 @@ "version": "0.2.2", "description": "React Native for Web", "main": "dist/index.js", + "module": "dist/module.js", "files": [ "dist", "jest", diff --git a/packages/react-native-web/src/index.js b/packages/react-native-web/src/index.js index d7dbe89b..10d47cc9 100644 --- a/packages/react-native-web/src/index.js +++ b/packages/react-native-web/src/index.js @@ -1,2 +1,2 @@ -import ReactNative from './module'; -module.exports = ReactNative; +import * as ReactNative from './module'; +export default ReactNative; diff --git a/packages/react-native-web/src/module.js b/packages/react-native-web/src/module.js index f0ac07fa..fa585deb 100644 --- a/packages/react-native-web/src/module.js +++ b/packages/react-native-web/src/module.js @@ -128,75 +128,3 @@ export { TextPropTypes, ViewPropTypes }; - -const ReactNative = { - // top-level API - findNodeHandle, - render, - unmountComponentAtNode, - - // modules - createElement, - NativeModules, - processColor, - - // APIs - Animated, - AppRegistry, - AppState, - AsyncStorage, - BackHandler, - Clipboard, - Dimensions, - Easing, - I18nManager, - InteractionManager, - Keyboard, - Linking, - NetInfo, - PanResponder, - PixelRatio, - Platform, - StyleSheet, - UIManager, - Vibration, - - // components - ActivityIndicator, - ART, - Button, - CheckBox, - FlatList, - Image, - ImageBackground, - KeyboardAvoidingView, - ListView, - Modal, - Picker, - ProgressBar, - RefreshControl, - SafeAreaView, - ScrollView, - SectionList, - Slider, - StatusBar, - Switch, - Text, - TextInput, - Touchable, - TouchableHighlight, - TouchableNativeFeedback, - TouchableOpacity, - TouchableWithoutFeedback, - View, - VirtualizedList, - - // propTypes - ColorPropType, - EdgeInsetsPropType, - PointPropType, - TextPropTypes, - ViewPropTypes -}; - -export default ReactNative; diff --git a/website/guides/getting-started.md b/website/guides/getting-started.md index e2048f2a..f1d79748 100644 --- a/website/guides/getting-started.md +++ b/website/guides/getting-started.md @@ -14,20 +14,9 @@ which has built-in React Native for Web support (once you install ## Adding to an existing web app -Add the `react-native-web` plugin to your Babel configuration. This will -alias `react-native` to `react-native-web` and exclude any modules not required -by the app. - -```json -{ - "presets": [ - "react-native" - ], - "plugins": [ - "react-native-web" - ] -} -``` +Add [`babel-plugin-react-native-web`](https://www.npmjs.com/package/babel-plugin-react-native-web) +to your Babel configuration. This will alias `react-native` to +`react-native-web` and exclude any modules not required by the app. ## Client-side rendering @@ -190,10 +179,11 @@ const babelLoaderConfiguration = { loader: 'babel-loader', options: { cacheDirectory: true, + // Babel configuration (or use .babelrc) // This aliases 'react-native' to 'react-native-web' and includes only // the modules needed by the app. plugins: ['react-native-web', 'transform-runtime'], - // The 'react-native' preset is recommended (or use your own .babelrc). + // The 'react-native' preset is recommended to match React Native's packager presets: ['react-native'] } } diff --git a/website/package.json b/website/package.json index 95b2d97a..8858f3f3 100644 --- a/website/package.json +++ b/website/package.json @@ -15,6 +15,7 @@ "react-native-web": "^0.2.2" }, "devDependencies": { + "babel-plugin-react-native-web": "^0.2.2", "url-loader": "^0.6.2", "webpack": "^3.10.0" } diff --git a/yarn.lock b/yarn.lock index 5a8c838d..0f528e7e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1336,7 +1336,7 @@ babel-plugin-transform-object-assign@^6.5.0: dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-object-rest-spread@6.26.0, babel-plugin-transform-object-rest-spread@^6.22.0, babel-plugin-transform-object-rest-spread@^6.5.0: +babel-plugin-transform-object-rest-spread@6.26.0, babel-plugin-transform-object-rest-spread@^6.22.0, babel-plugin-transform-object-rest-spread@^6.26.0, babel-plugin-transform-object-rest-spread@^6.5.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06" dependencies: