Use autoprefixer for babel: compile less, polyfills only for supported environments #1115
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
phpeek
reviewed
Feb 5, 2017
tools/webpack.config.js
Outdated
| }, | ||
| modules: false, | ||
| useBuiltIns: true, | ||
| debug: false, |
There was a problem hiding this comment.
Can value of debug prop come from isVerbose / isDebug consts ?
I think isVerbose might be more suitable here, since yarn build's output would look something like this:
babel-preset-env: `DEBUG` option
Using targets:
{
"chrome": 49,
"edge": 12,
"firefox": 45,
"ie": 9,
"ios": 8,
"safari": 8
}
Modules transform: false
Using plugins:
transform-es2015-arrow-functions {"chrome":47,"edge":13,"firefox":45,"ios":10,"safari":10}
transform-es2015-block-scoped-functions {"chrome":41,"firefox":46,"ie":11,"ios":10,"safari":10}
transform-es2015-block-scoping {"chrome":49,"firefox":51,"ios":10,"safari":10}
transform-es2015-classes {"chrome":46,"edge":13,"firefox":45,"ios":10,"safari":10}
transform-es2015-computed-properties {"chrome":44,"edge":12,"firefox":34,"ios":10,"safari":7}
check-es2015-constants {"chrome":49,"firefox":51,"ios":10,"safari":10}
transform-es2015-destructuring {"chrome":51,"ios":10,"safari":10}
transform-es2015-for-of {"chrome":51,"ios":10,"safari":10}
transform-es2015-function-name {"chrome":51,"ios":10,"safari":10}
transform-es2015-literals {"chrome":44,"edge":12,"ios":9,"safari":9}
transform-es2015-object-super {"chrome":46,"edge":13,"firefox":45,"ios":10,"safari":10}
transform-es2015-parameters {"chrome":49,"edge":14,"ios":10,"safari":10}
transform-es2015-shorthand-properties {"chrome":43,"edge":12,"firefox":33,"ios":9,"safari":9}
transform-es2015-spread {"chrome":46,"edge":13,"firefox":36,"ios":10,"safari":10}
transform-es2015-sticky-regex {"chrome":49,"edge":13,"firefox":3,"ios":10,"safari":10}
transform-es2015-template-literals {"chrome":41,"edge":13,"firefox":34,"ios":9,"safari":9}
transform-es2015-typeof-symbol {"chrome":38,"edge":12,"firefox":36,"ios":9,"safari":9}
transform-es2015-unicode-regex {"chrome":50,"edge":13,"firefox":46,"ios":10,"safari":10}
transform-regenerator {"chrome":50,"edge":13,"ios":10,"safari":10}
transform-exponentiation-operator {"chrome":52,"edge":14,"firefox":52}
transform-async-to-generator {"chrome":55,"firefox":52}
syntax-trailing-function-commas {"edge":14,"firefox":52,"ios":10,"safari":10}
Using polyfills:
es6.typed.data-view {"chrome":5,"firefox":15,"ie":10,"ios":6,"safari":5}
es6.typed.int8-array {"chrome":5,"firefox":4,"ie":10,"ios":6,"safari":5}
es6.typed.uint8-array {"chrome":5,"firefox":4,"ie":10,"ios":6,"safari":5}
es6.typed.uint8-clamped-array {"chrome":5,"edge":12,"firefox":4,"ios":10,"safari":6}
es6.typed.int16-array {"chrome":5,"firefox":4,"ie":10,"ios":6,"safari":5}
es6.typed.uint16-array {"chrome":5,"firefox":4,"ie":10,"ios":6,"safari":5}
es6.typed.int32-array {"chrome":5,"firefox":4,"ie":10,"ios":6,"safari":5}
es6.typed.uint32-array {"chrome":5,"firefox":4,"ie":10,"ios":6,"safari":5}
es6.typed.float32-array {"chrome":5,"firefox":4,"ie":10,"ios":6,"safari":5}
es6.typed.float64-array {"chrome":5,"firefox":4,"ie":10,"ios":6,"safari":5}
es6.map {"chrome":51,"ios":10,"safari":10}
es6.set {"chrome":51,"ios":10,"safari":10}
es6.weak-map {"chrome":51,"ios":10,"safari":9}
es6.weak-set {"chrome":51,"ios":9,"safari":9}
es6.reflect.apply {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.construct {"chrome":49,"edge":13,"firefox":45,"ios":10,"safari":10}
es6.reflect.define-property {"chrome":49,"edge":13,"firefox":42,"ios":10,"safari":10}
es6.reflect.delete-property {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.get {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.get-own-property-descriptor {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.get-prototype-of {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.has {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.is-extensible {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.own-keys {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.prevent-extensions {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.set {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.reflect.set-prototype-of {"chrome":49,"edge":12,"firefox":42,"ios":10,"safari":10}
es6.promise {"chrome":51,"edge":13,"firefox":45,"ios":10,"safari":10}
es6.symbol {"chrome":51,"firefox":51,"ios":10,"safari":10}
es6.object.assign {"chrome":45,"edge":12,"firefox":34,"ios":9,"safari":9}
es6.object.is {"chrome":19,"edge":12,"firefox":22,"ios":9,"safari":9}
es6.object.set-prototype-of {"chrome":34,"firefox":31,"ie":11,"ios":9,"safari":9}
es6.function.name {"chrome":51,"ios":10,"safari":10}
es6.string.raw {"chrome":41,"edge":12,"firefox":34,"ios":9,"safari":9}
es6.string.from-code-point {"chrome":41,"edge":12,"firefox":29,"ios":9,"safari":9}
es6.string.code-point-at {"chrome":41,"edge":12,"firefox":29,"ios":9,"safari":9}
es6.string.repeat {"chrome":41,"edge":12,"firefox":24,"ios":9,"safari":9}
es6.string.starts-with {"chrome":41,"edge":12,"firefox":29,"ios":9,"safari":9}
es6.string.ends-with {"chrome":41,"edge":12,"firefox":29,"ios":9,"safari":9}
es6.string.includes {"chrome":41,"edge":12,"firefox":40,"ios":9,"safari":9}
es6.regexp.flags {"chrome":49,"firefox":37,"ios":9,"safari":9}
es6.regexp.match {"chrome":50,"firefox":49,"ios":10,"safari":10}
es6.regexp.replace {"chrome":50,"firefox":49,"ios":10,"safari":10}
es6.regexp.split {"chrome":50,"firefox":49,"ios":10,"safari":10}
es6.regexp.search {"chrome":50,"firefox":49,"ios":10,"safari":10}
es6.array.from {"chrome":51,"ios":10,"safari":10}
es6.array.of {"chrome":45,"edge":12,"firefox":25,"ios":9,"safari":9}
es6.array.copy-within {"chrome":45,"edge":12,"firefox":32,"ios":9,"safari":9}
es6.array.find {"chrome":45,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.array.find-index {"chrome":45,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.array.fill {"chrome":45,"edge":12,"firefox":31,"ios":10,"safari":7}
es6.array.iterator {"chrome":38,"edge":12,"firefox":28,"ios":10,"safari":7}
es6.number.is-finite {"chrome":19,"edge":12,"firefox":16,"ios":9,"safari":9}
es6.number.is-integer {"chrome":34,"edge":12,"firefox":16,"ios":9,"safari":9}
es6.number.is-safe-integer {"chrome":34,"edge":12,"firefox":32,"ios":9,"safari":9}
es6.number.is-nan {"chrome":19,"edge":12,"firefox":15,"ios":9,"safari":9}
es6.number.epsilon {"chrome":34,"edge":12,"firefox":25,"ios":9,"safari":9}
es6.number.min-safe-integer {"chrome":34,"edge":12,"firefox":31,"ios":9,"safari":9}
es6.number.max-safe-integer {"chrome":34,"edge":12,"firefox":31,"ios":9,"safari":9}
es6.math.acosh {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.asinh {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.atanh {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.cbrt {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.clz32 {"chrome":38,"edge":12,"firefox":31,"ios":9,"safari":9}
es6.math.cosh {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.expm1 {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.fround {"chrome":38,"edge":12,"firefox":26,"ios":10,"safari":7}
es6.math.hypot {"chrome":38,"edge":12,"firefox":27,"ios":10,"safari":7}
es6.math.imul {"chrome":30,"edge":12,"firefox":23,"ios":8,"safari":7}
es6.math.log1p {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.log10 {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.log2 {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.sign {"chrome":38,"edge":12,"firefox":25,"ios":9,"safari":9}
es6.math.sinh {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.tanh {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es6.math.trunc {"chrome":38,"edge":12,"firefox":25,"ios":10,"safari":7}
es7.array.includes {"chrome":47,"edge":14,"firefox":43,"ios":10,"safari":10}
es7.object.values {"chrome":54,"edge":14,"firefox":47}
es7.object.entries {"chrome":54,"edge":14,"firefox":47}
es7.object.get-own-property-descriptors {"chrome":54,"firefox":50}
es7.string.pad-start {"firefox":48,"ios":10,"safari":10}
es7.string.pad-end {"firefox":48,"ios":10,"safari":10}
web.timers {}
web.immediate {}
web.dom.iterable {}There was a problem hiding this comment.
I did not use isVerbose here because if I set debug: true for both client and server configs I see debug log only for first of them. So, I think maybe it is better to change the option only when you need it. Ref: babel/babel-preset-env#147
frenzzy
force-pushed
the
babel-autoprefixer
branch
4 times, most recently
from
31df8a5 to
ff9d032
Compare
frenzzy
force-pushed
the
babel-autoprefixer
branch
from
ff9d032 to
3ca1612
Compare
|
@frenzzy After reverting this problem disapeared. |
|
@langpavel, Function declarations in babel are hoisted: babel/babel-preset-env#112 (comment) You still can migrate to actual changes and continue using ['latest', { es2015: { modules: false } }], |
|
Hmm, I think problem is in webpack, not sure.., may be because of I tested it and module runs, but reference is not updated in place.. so something is really broken in stack. |
|
This PR disables webpack 2 tree-shaking, maybe it is related (reenabled back in 7bbe94c) |
JasonPierce
pushed a commit
to 2Toad/react-starter-kit
that referenced
this pull request
Apr 18, 2017
- Integrate autoprefixer for Babel that can automatically determine the Babel plugins to compile only for your supported environments: [`babel-preset-env`](https://github.com/babel/babel-preset-env) - Move `browserslist` to `package.json` for `autprefixer`, `stylelint` and `babel-preset-env` - Replace `babel-preset-stage-0` with `babel-preset-stage-2` to avoid using [unstable features](https://babeljs.io/docs/plugins/#presets-stage-x-experimental-presets-) in production - Remove `babel-plugin-transform-runtime` dependency in favor of `babel-polyfills` - Remove `extend` dependency
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
babel-preset-envbrowserslisttopackage.jsonforautprefixer,stylelintandbabel-preset-envbabel-preset-stage-0withbabel-preset-stage-2to avoid using unstable features in productionbabel-plugin-transform-runtimedependency in favor ofbabel-polyfillsextenddependency