Skip to content

Commit ac1396b

Browse files
halfzebrahalfzebra
committed
feat(package.json, webpack.config.dev.js, webpack.config.prod.js): Upgrade 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
1 parent 2349bfc commit ac1396b

File tree

3 files changed

+81
-36
lines changed

3 files changed

+81
-36
lines changed

‎config/webpack.config.dev.js

+39-16
Original file line numberDiff line numberDiff line change
@@ -72,44 +72,67 @@ module.exports = {
7272
rules: [
7373
{
7474
test: /\.js$/,
75-
exclude: [/elm-stuff/, /node_modules/],
75+
exclude: [/[/\\\\]elm-stuff[/\\\\]/, /[/\\\\]node_modules[/\\\\]/],
76+
include: paths.appSrc,
7677
loader: require.resolve('babel-loader'),
7778
query: {
78-
// Latest stable ECMAScript features
7979
presets: [
8080
[
81-
require.resolve('babel-preset-env'),
81+
require.resolve('@babel/preset-env'),
8282
{
83-
targets: {
84-
// React parses on ie 9, so we should too
85-
ie: 9,
86-
// We currently minify with uglify
87-
// Remove after https://github.com/mishoo/UglifyJS2/issues/448
88-
uglify: true
89-
},
90-
// Disable polyfill transforms
91-
useBuiltIns: false,
83+
// `entry` transforms `@babel/polyfill` into individual requires for
84+
// the targeted browsers. This is safer than `usage` which performs
85+
// static code analysis to determine what's required.
86+
// This is probably a fine default to help trim down bundles when
87+
// end-users inevitably import '@babel/polyfill'.
88+
useBuiltIns: 'entry',
9289
// Do not transform modules to CJS
9390
modules: false
9491
}
9592
]
9693
],
9794
plugins: [
95+
// Polyfills the runtime needed for async/await and generators
9896
[
99-
require.resolve('babel-plugin-transform-runtime'),
97+
require('@babel/plugin-transform-runtime').default,
10098
{
10199
helpers: false,
102-
polyfill: false,
103100
regenerator: true
104101
}
105102
]
106103
]
107104
}
108105
},
109-
106+
// Process any JS outside of the app with Babel.
107+
// Unlike the application JS, we only compile the standard ES features.
108+
{
109+
test: /\.js$/,
110+
use: [
111+
{
112+
loader: require.resolve('babel-loader'),
113+
options: {
114+
babelrc: false,
115+
compact: false,
116+
presets: [
117+
[
118+
// Latest stable ECMAScript features
119+
require('@babel/preset-env').default,
120+
{
121+
// Do not transform modules to CJS
122+
modules: false
123+
}
124+
]
125+
],
126+
cacheDirectory: true,
127+
highlightCode: true
128+
}
129+
}
130+
]
131+
},
110132
{
111133
test: /\.elm$/,
112-
exclude: [/elm-stuff/, /node_modules/],
134+
include: paths.appSrc,
135+
exclude: [/[/\\\\]elm-stuff[/\\\\]/, /[/\\\\]node_modules[/\\\\]/],
113136
use: [
114137
{
115138
loader: require.resolve('elm-hot-webpack-loader')

‎config/webpack.config.prod.js

+37-15
Original file line numberDiff line numberDiff line change
@@ -95,44 +95,66 @@ module.exports = {
9595
rules: [
9696
{
9797
test: /\.js$/,
98-
exclude: [/elm-stuff/, /node_modules/],
98+
exclude: [/[/\\\\]elm-stuff[/\\\\]/, /[/\\\\]node_modules[/\\\\]/],
9999
loader: require.resolve('babel-loader'),
100100
query: {
101101
// Latest stable ECMAScript features
102102
presets: [
103103
[
104-
require.resolve('babel-preset-env'),
104+
require.resolve('@babel/preset-env'),
105105
{
106-
targets: {
107-
// React parses on ie 9, so we should too
108-
ie: 9,
109-
// We currently minify with uglify
110-
// Remove after https://github.com/mishoo/UglifyJS2/issues/448
111-
uglify: true
112-
},
113-
// Disable polyfill transforms
114-
useBuiltIns: false,
106+
// `entry` transforms `@babel/polyfill` into individual requires for
107+
// the targeted browsers. This is safer than `usage` which performs
108+
// static code analysis to determine what's required.
109+
// This is probably a fine default to help trim down bundles when
110+
// end-users inevitably import '@babel/polyfill'.
111+
useBuiltIns: 'entry',
115112
// Do not transform modules to CJS
116113
modules: false
117114
}
118115
]
119116
],
120117
plugins: [
118+
// Polyfills the runtime needed for async/await and generators
121119
[
122-
require.resolve('babel-plugin-transform-runtime'),
120+
require('@babel/plugin-transform-runtime').default,
123121
{
124122
helpers: false,
125-
polyfill: false,
126123
regenerator: true
127124
}
128125
]
129126
]
130127
}
131128
},
132-
129+
// Process any JS outside of the app with Babel.
130+
// Unlike the application JS, we only compile the standard ES features.
131+
{
132+
test: /\.js$/,
133+
use: [
134+
{
135+
loader: require.resolve('babel-loader'),
136+
options: {
137+
babelrc: false,
138+
compact: false,
139+
presets: [
140+
[
141+
// Latest stable ECMAScript features
142+
require('@babel/preset-env').default,
143+
{
144+
// Do not transform modules to CJS
145+
modules: false
146+
}
147+
]
148+
],
149+
cacheDirectory: true,
150+
highlightCode: true
151+
}
152+
}
153+
]
154+
},
133155
{
134156
test: /\.elm$/,
135-
exclude: [/elm-stuff/, /node_modules/],
157+
exclude: [/[/\\\\]elm-stuff[/\\\\]/, /[/\\\\]node_modules[/\\\\]/],
136158
use: [
137159
// string-replace-loader works as InterpolateHtmlPlugin for Elm,
138160
// it replaces all of the %PUBLIC_URL% with the URL of your

‎package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@
1717
}
1818
},
1919
"dependencies": {
20+
"@babel/cli": "7.0.0-beta.56",
21+
"@babel/core": "7.0.0-beta.56",
22+
"@babel/plugin-transform-runtime": "7.0.0-beta.56",
23+
"@babel/preset-env": "7.0.0-beta.56",
2024
"assets-webpack-plugin": "^3.5.1",
2125
"autoprefixer": "^8.0.0",
22-
"babel-cli": "^6.26.0",
23-
"babel-core": "^6.26.0",
24-
"babel-loader": "^7.1.2",
25-
"babel-plugin-transform-runtime": "^6.23.0",
26-
"babel-preset-env": "^1.6.1",
26+
"babel-loader": "8.0.0-beta.4",
2727
"babel-runtime": "^6.26.0",
2828
"chalk": "^2.3.1",
2929
"clean-webpack-plugin": "^0.1.18",

0 commit comments

Comments
 (0)