feat: add slim builds for modern browsers

fixes #259
release
Nolan Lawson 2018-12-18 13:54:21 -08:00
parent 8c80e7d4e5
commit b1be155787
4 changed files with 70 additions and 39 deletions

View File

@ -2,47 +2,50 @@
"presets": ["react"],
"plugins": [
"check-es2015-constants",
"transform-es2015-arrow-functions",
"transform-es2015-block-scoped-functions",
"transform-es2015-block-scoping",
"transform-es2015-classes",
"transform-es2015-computed-properties",
"transform-es2015-destructuring",
"transform-es2015-duplicate-keys",
"transform-es2015-for-of",
"transform-es2015-function-name",
"transform-es2015-literals",
"transform-es2015-object-super",
"transform-es2015-parameters",
"transform-es2015-shorthand-properties",
"transform-es2015-spread",
"transform-es2015-sticky-regex",
"transform-es2015-template-literals",
"transform-es2015-unicode-regex",
"transform-regenerator",
"transform-object-rest-spread",
"transform-runtime",
[
"transform-define", "scripts/define.js"
],
[
"module-resolver",
{
"alias": {
"babel-runtime/core-js/object/get-prototype-of": "./src/polyfills/objectGetPrototypeOf",
"babel-runtime/helpers/extends": "./src/polyfills/extends",
"babel-runtime/helpers/inherits": "./src/polyfills/inherits",
"babel-runtime/helpers/createClass": "./src/polyfills/createClass",
"babel-runtime/helpers/possibleConstructorReturn": "./src/polyfills/possibleConstructorReturn",
"babel-runtime/helpers/classCallCheck": "./src/polyfills/classCallCheck",
"babel-runtime/core-js/object/keys": "./src/polyfills/keys"
}
}
]
],
"env": {
"cjs": {
"legacy-es": {
"plugins": [
"transform-es2015-arrow-functions",
"transform-es2015-block-scoped-functions",
"transform-es2015-block-scoping",
"transform-es2015-classes",
"transform-es2015-computed-properties",
"transform-es2015-destructuring",
"transform-es2015-duplicate-keys",
"transform-es2015-for-of",
"transform-es2015-function-name",
"transform-es2015-literals",
"transform-es2015-object-super",
"transform-es2015-parameters",
"transform-es2015-shorthand-properties",
"transform-es2015-spread",
"transform-es2015-sticky-regex",
"transform-es2015-template-literals",
"transform-es2015-unicode-regex",
"transform-regenerator",
"transform-runtime",
[
"module-resolver",
{
"alias": {
"babel-runtime/core-js/object/get-prototype-of": "./src/polyfills/objectGetPrototypeOf",
"babel-runtime/helpers/extends": "./src/polyfills/extends",
"babel-runtime/helpers/inherits": "./src/polyfills/inherits",
"babel-runtime/helpers/createClass": "./src/polyfills/createClass",
"babel-runtime/helpers/possibleConstructorReturn": "./src/polyfills/possibleConstructorReturn",
"babel-runtime/helpers/classCallCheck": "./src/polyfills/classCallCheck",
"babel-runtime/core-js/object/keys": "./src/polyfills/keys"
}
}
]
]
},
"legacy-cjs": {
"plugins": [
"transform-es2015-modules-commonjs"
]

1
.gitignore vendored
View File

@ -2,5 +2,6 @@
node_modules/
dist/
dist-es/
dist-modern/
stats.json
report.html

View File

@ -365,7 +365,33 @@ Apple / Google / Twitter / EmojiOne / Messenger / Facebook
## Not opinionated
**Emoji Mart** doesnt automatically insert anything into a text input, nor does it show or hide itself. It simply returns an `emoji` object. Its up to the developer to mount/unmount (its fast!) and position the picker. You can use the returned object as props for the `EmojiMart.Emoji` component. You could also use `emoji.colons` to insert text into a textarea or `emoji.native` to use the emoji.
## Removing prop-types in production
## Optimizing for production
### Modern/ES builds
**Emoji Mart** comes in three flavors:
```
dist
dist-es
dist-modern
```
- `dist` is the standard build with the highest level of compatibility.
- `dist-es` is the same, but uses ES modules for better tree-shaking.
- `dist-modern` removes features not needed in modern evergreen browsers (i.e. latest Chrome, Edge, Firefox, and Safari).
The default builds are `dist` and `dist-es`. (In Webpack, one or the other will be chosen based on your [resolve main fields](https://webpack.js.org/configuration/resolve/#resolve-mainfields).)
If you want to use `dist-modern`, you must explicitly import it:
```js
import { Picker } from 'emoji-mart/dist-modern/index.js'
```
Using something like Babel, you can transpile the modern build to suit your own needs.
### Removing prop-types
To remove [prop-types](https://github.com/facebook/prop-types) in production, use [babel-plugin-transform-react-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types):

View File

@ -61,9 +61,10 @@
"scripts": {
"clean": "rm -rf dist/ dist-es/",
"build:data": "node scripts/build-data",
"build:dist": "npm run build:cjs && npm run build:es",
"build:cjs": "BABEL_ENV=cjs babel src --out-dir dist --copy-files",
"build:es": "babel src --out-dir dist-es --copy-files",
"build:dist": "npm run build:cjs && npm run build:es && npm run build:modern",
"build:cjs": "BABEL_ENV=legacy-cjs babel src --out-dir dist --copy-files",
"build:es": "BABEL_ENV=legacy-es babel src --out-dir dist-es --copy-files",
"build:modern": "babel src --out-dir dist-modern --copy-files",
"build:docs": "cp css/emoji-mart.css docs && webpack --config ./docs/webpack.config.js",
"build": "npm run clean && npm run build:dist",
"watch": "BABEL_ENV=cjs babel src --watch --out-dir dist --copy-files",