Skip to content

Commit

Permalink
feat(package.json, webpack.config.dev.js, webpack.config.prod.js): Up…
Browse files Browse the repository at this point in the history 
…grade Babel setup and enable transpilation of third-party code

More context in: facebook/create-react-app#3776

BREAKING CHANGE: Now we compile third-party JavaScript code with Babel.

fix #217
  • Loading branch information
@halfzebra
halfzebra committed Aug 30, 2018
1 parent 2349bfc commit ac1396b
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 36 deletions.
55 changes: 39 additions & 16 deletions config/webpack.config.dev.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,44 +72,67 @@ module.exports = {
rules: [
{
test: /\.js$/,
exclude: [/elm-stuff/, /node_modules/],
exclude: [/[/\\\\]elm-stuff[/\\\\]/, /[/\\\\]node_modules[/\\\\]/],
include: paths.appSrc,
loader: require.resolve('babel-loader'),
query: {
// Latest stable ECMAScript features
presets: [
[
require.resolve('babel-preset-env'),
require.resolve('@babel/preset-env'),
{
targets: {
// React parses on ie 9, so we should too
ie: 9,
// We currently minify with uglify
// Remove after https://github.com/mishoo/UglifyJS2/issues/448
uglify: true
},
// Disable polyfill transforms
useBuiltIns: false,
// `entry` transforms `@babel/polyfill` into individual requires for
// the targeted browsers. This is safer than `usage` which performs
// static code analysis to determine what's required.
// This is probably a fine default to help trim down bundles when
// end-users inevitably import '@babel/polyfill'.
useBuiltIns: 'entry',
// Do not transform modules to CJS
modules: false
}
]
],
plugins: [
// Polyfills the runtime needed for async/await and generators
[
require.resolve('babel-plugin-transform-runtime'),
require('@babel/plugin-transform-runtime').default,
{
helpers: false,
polyfill: false,
regenerator: true
}
]
]
}
},

// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.js$/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
compact: false,
presets: [
[
// Latest stable ECMAScript features
require('@babel/preset-env').default,
{
// Do not transform modules to CJS
modules: false
}
]
],
cacheDirectory: true,
highlightCode: true
}
}
]
},
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
include: paths.appSrc,
exclude: [/[/\\\\]elm-stuff[/\\\\]/, /[/\\\\]node_modules[/\\\\]/],
use: [
{
loader: require.resolve('elm-hot-webpack-loader')
Expand Down
52 changes: 37 additions & 15 deletions config/webpack.config.prod.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,44 +95,66 @@ module.exports = {
rules: [
{
test: /\.js$/,
exclude: [/elm-stuff/, /node_modules/],
exclude: [/[/\\\\]elm-stuff[/\\\\]/, /[/\\\\]node_modules[/\\\\]/],
loader: require.resolve('babel-loader'),
query: {
// Latest stable ECMAScript features
presets: [
[
require.resolve('babel-preset-env'),
require.resolve('@babel/preset-env'),
{
targets: {
// React parses on ie 9, so we should too
ie: 9,
// We currently minify with uglify
// Remove after https://github.com/mishoo/UglifyJS2/issues/448
uglify: true
},
// Disable polyfill transforms
useBuiltIns: false,
// `entry` transforms `@babel/polyfill` into individual requires for
// the targeted browsers. This is safer than `usage` which performs
// static code analysis to determine what's required.
// This is probably a fine default to help trim down bundles when
// end-users inevitably import '@babel/polyfill'.
useBuiltIns: 'entry',
// Do not transform modules to CJS
modules: false
}
]
],
plugins: [
// Polyfills the runtime needed for async/await and generators
[
require.resolve('babel-plugin-transform-runtime'),
require('@babel/plugin-transform-runtime').default,
{
helpers: false,
polyfill: false,
regenerator: true
}
]
]
}
},

// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.js$/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
compact: false,
presets: [
[
// Latest stable ECMAScript features
require('@babel/preset-env').default,
{
// Do not transform modules to CJS
modules: false
}
]
],
cacheDirectory: true,
highlightCode: true
}
}
]
},
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
exclude: [/[/\\\\]elm-stuff[/\\\\]/, /[/\\\\]node_modules[/\\\\]/],
use: [
// string-replace-loader works as InterpolateHtmlPlugin for Elm,
// it replaces all of the %PUBLIC_URL% with the URL of your
Expand Down
10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@
}
},
"dependencies": {
"@babel/cli": "7.0.0-beta.56",
"@babel/core": "7.0.0-beta.56",
"@babel/plugin-transform-runtime": "7.0.0-beta.56",
"@babel/preset-env": "7.0.0-beta.56",
"assets-webpack-plugin": "^3.5.1",
"autoprefixer": "^8.0.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-loader": "8.0.0-beta.4",
"babel-runtime": "^6.26.0",
"chalk": "^2.3.1",
"clean-webpack-plugin": "^0.1.18",
Expand Down

0 comments on commit ac1396b

Please sign in to comment.