Skip to content

Commit ebdb1a7

Browse files
author
Nick Balestra
committed
transform-object-rest-spread
1 parent 89e3142 commit ebdb1a7

File tree

3 files changed

+105
-70
lines changed

3 files changed

+105
-70
lines changed

‎packages/cycle-scripts/configs/webpack.config.dev.js‎

Lines changed: 58 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,67 @@
11
'use strict'
22

3-
const path = require('path')
3+
// Silence webpack2 deprecation warnings
4+
// https://github.com/vuejs/vue-loader/issues/666
5+
process.noDeprecation = true
6+
47
const HtmlWebpackPlugin = require('html-webpack-plugin')
8+
const path = require('path')
59
const webpack = require('webpack')
610

11+
// Paths to be used for webpack configuration
12+
const paths = {
13+
appSrc: path.join(process.cwd(), 'src'),
14+
appIndex: path.join(process.cwd(), 'src', 'index.js'),
15+
appBuild: path.join(process.cwd(), 'build'),
16+
public: '/'
17+
}
18+
719
module.exports = {
820
entry: {
921
main: [
22+
// Include an alternative client for WebpackDevServer. A client's job is to
23+
// connect to WebpackDevServer by a socket and get notified about changes.
24+
// When you save a file, the client will either apply hot updates (in case
25+
// of CSS changes), or refresh the page (in case of JS changes). When you
26+
// make a syntax error, this client will display a syntax error overlay.
27+
// Note: instead of the default WebpackDevServer client, we use a custom one
28+
// to bring better experience for Create React App users. You can replace
29+
// the line below with these two lines if you prefer the stock client:
30+
// require.resolve('webpack-dev-server/client') + '?/',
31+
// require.resolve('webpack/hot/dev-server'),
1032
require.resolve('cycle-dev-utils/webpackHotDevClient'),
11-
path.join(process.cwd(), 'src', 'index.js')
33+
// Your app's code
34+
paths.appIndex
1235
]
1336
},
1437
output: {
15-
filename: 'bundle.js',
16-
path: path.join(process.cwd(), 'build', 'bundle.js')
38+
// This does not produce a real file. It's just the virtual path that is
39+
// served by WebpackDevServer in development. This is the JS bundle
40+
// containing code from all our entry points, and the Webpack runtime.
41+
filename: 'static/js/bundle.js',
42+
// Not used in dev but WebpackDevServer crashes without it:
43+
path: paths.appBuild,
44+
// The URL that app is served from. We use "/" in development.
45+
publicPath: paths.public
1746
},
1847
module: {
1948
rules: [
2049
{
50+
// We use babel-loader to transipile every .js or .jsx file
2151
test: /\.jsx?$/,
2252
loader: 'babel-loader',
53+
// Including over excluding as a whitelist is easier to maintain than a blacklist.
54+
// as per http://stackoverflow.com/questions/31675025/how-to-exclude-nested-node-module-folders-from-a-loader-in-webpack
55+
include: paths.appSrc,
2356
options: {
57+
// This is a feature of `babel-loader` for webpack (not Babel itself).
58+
// It enables caching results in ./node_modules/.cache/babel-loader/
59+
// directory for faster rebuilds.
2460
cacheDirectory: true,
61+
// Instead of relying on a babelrc file to configure babel (or in package.json configs)
62+
// We speficy here which presets to use. In the future this could be moved to it's own
63+
// package as create-react-app does with their 'babel-preset-react-app module
64+
babelrc: false,
2565
presets: [
2666
[ 'env', {
2767
'targets': {
@@ -30,28 +70,34 @@ module.exports = {
3070
}]
3171
],
3272
plugins: [
33-
['transform-react-jsx', { pragma: 'Snabbdom.createElement' }]
73+
// https://cycle.js.org/getting-started.html#getting-started-coding-consider-jsx
74+
// This allow us to use JSX to create virtual dom elements instead of Snabbdom helpers like div(), input(), ..
75+
['transform-react-jsx', { pragma: 'Snabbdom.createElement' }],
76+
// Allow Babel to transform rest properties for object destructuring assignment and spread properties for object literals.
77+
['transform-object-rest-spread']
3478
]
35-
},
36-
exclude: /node_modules/
79+
}
3780
}
3881
]
3982
},
4083
plugins: [
84+
// This is necessary to emit hot updates (currently CSS only):
4185
new webpack.HotModuleReplacementPlugin(),
86+
// Generates an `index.html` file with the <script> injected.
4287
new HtmlWebpackPlugin({
4388
template: 'public/index.html',
4489
inject: true,
4590
favicon: 'public/favicon.png',
4691
hash: true
4792
}),
93+
// Makes environment variables available to the JS code, fallback to 'development'
94+
new webpack.DefinePlugin({
95+
DEVELOPMENT: JSON.stringify(process.env.NODE_ENV === 'development')
96+
}),
97+
// To be used for JSX support
4898
new webpack.ProvidePlugin({
4999
Snabbdom: 'snabbdom-pragma'
50-
}),
51-
new webpack.LoaderOptionsPlugin({
52-
minimize: true,
53-
debug: false
54100
})
55101
],
56-
devtool: 'cheap-module-source-map'
102+
devtool: 'inline-source-map'
57103
}

‎packages/cycle-scripts/configs/webpack.config.prod.js‎

Lines changed: 46 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,53 @@
11
'use strict'
22

3+
// Silence webpack2 deprecation warnings
4+
// https://github.com/vuejs/vue-loader/issues/666
5+
process.noDeprecation = true
6+
37
const path = require('path')
48
const HtmlWebpackPlugin = require('html-webpack-plugin')
59
const webpack = require('webpack')
610

11+
// Paths to be used for webpack configuration
12+
const paths = {
13+
appSrc: path.join(process.cwd(), 'src'),
14+
appIndex: path.join(process.cwd(), 'src', 'index.js'),
15+
appBuild: path.join(process.cwd(), 'build'),
16+
public: '/'
17+
}
18+
719
module.exports = {
820
entry: {
921
main: [
10-
path.join(process.cwd(), 'src', 'index.js')
22+
// Your app's code
23+
paths.appIndex
1124
]
1225
},
1326
output: {
27+
// This is the productin JS bundle containing code from all our entry points.
1428
filename: 'bundle.js',
15-
path: path.join(process.cwd(), 'build')
29+
// The output path where webpack will write the bundle
30+
path: paths.appBuild
1631
},
1732
module: {
1833
rules: [
1934
{
35+
// We use babel-loader to transipile every .js or .jsx file
2036
test: /\.jsx?$/,
2137
loader: 'babel-loader',
38+
// Including over excluding as a whitelist is easier to maintain than a blacklist.
39+
// as per http://stackoverflow.com/questions/31675025/how-to-exclude-nested-node-module-folders-from-a-loader-in-webpack
40+
include: paths.appSrc,
2241
options: {
42+
// This is a feature of `babel-loader` for webpack (not Babel itself).
43+
// It enables caching results in ./node_modules/.cache/babel-loader/
44+
// directory for faster rebuilds.
2345
cacheDirectory: true,
46+
// Instead of relying on a babelrc file to configure babel (or in package.json configs)
47+
// We speficy here which presets to use. In the future this could be moved to it's own
48+
// package as create-react-app does with their 'babel-preset-react-app module.
49+
// As uglify doesn't support es6 code yet, the uglify param will tell babel plugin to transpile to es5
50+
// in order for the output to be uglified.
2451
presets: [
2552
[ 'env', {
2653
'targets': {
@@ -30,75 +57,36 @@ module.exports = {
3057
}]
3158
],
3259
plugins: [
33-
['transform-react-jsx', { pragma: 'Snabbdom.createElement' }]
60+
// https://cycle.js.org/getting-started.html#getting-started-coding-consider-jsx
61+
// This allow us to use JSX to create virtual dom elements instead of Snabbdom helpers like div(), input(), ..
62+
['transform-react-jsx', { pragma: 'Snabbdom.createElement' }],
63+
// Allow Babel to transform rest properties for object destructuring assignment and spread properties for object literals.
64+
['transform-object-rest-spread']
3465
]
35-
},
36-
exclude: /node_modules/
66+
}
3767
}
3868
]
3969
},
4070
plugins: [
41-
new webpack.HotModuleReplacementPlugin(),
71+
// Generates an `index.html` file with the <script> injected.
4272
new HtmlWebpackPlugin({
4373
template: 'public/index.html',
4474
inject: true,
4575
favicon: 'public/favicon.png',
4676
hash: true
4777
}),
78+
// Makes environment variables available to the JS code, fallback to 'production'
79+
new webpack.DefinePlugin({
80+
PRODUCTION: JSON.stringify(process.env.NODE_ENV === 'production')
81+
}),
82+
// To be used for JSX support
4883
new webpack.ProvidePlugin({
4984
Snabbdom: 'snabbdom-pragma'
5085
}),
51-
new webpack.optimize.UglifyJsPlugin(),
52-
new webpack.LoaderOptionsPlugin({
53-
minimize: true,
54-
debug: false
86+
// Uglify plugin, depending on the devtool options, Source Maps are generated.
87+
new webpack.optimize.UglifyJsPlugin({
88+
sourceMap: this.devtool && this.devtool.indexOf('source-map') >= 0
5589
})
56-
]
90+
],
91+
devtool: 'cheap-module-source-map'
5792
}
58-
59-
// 'use strict'
60-
61-
// const fs = require('fs-extra')
62-
// const path = require('path')
63-
// const mkdirp = require('mkdirp')
64-
// const webpack = require('webpack')
65-
// const ProgressBarPlugin = require('progress-bar-webpack-plugin')
66-
67-
// const buildPath = path.join(process.cwd(), 'build')
68-
// const publicPath = path.join(process.cwd(), 'public')
69-
70-
// mkdirp.sync(buildPath)
71-
72-
// const compiler = webpack({
73-
// entry: [
74-
// './src/'
75-
// ],
76-
// output: {
77-
// filename: 'bundle.js',
78-
// path: './public/'
79-
// },
80-
// module: {
81-
// loaders: [
82-
// {
83-
// test: /\.js$/,
84-
// loader: 'babel',
85-
// query: {
86-
// presets: ['es2015']
87-
// },
88-
// exclude: /node_modules/
89-
// }
90-
// ]
91-
// },
92-
// plugins: [
93-
// new ProgressBarPlugin(),
94-
// new webpack.optimize.UglifyJsPlugin({minimize: true})
95-
// ]
96-
// })
97-
98-
// compiler.run((err, stats) => {
99-
// if (err) {
100-
// console.log(err)
101-
// } else {
102-
// fs.copySync(publicPath, buildPath)
103-
// }
104-
// })

‎packages/cycle-scripts/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"anser": "^1.2.7",
3434
"babel-core": "^6.23.1",
3535
"babel-loader": "^6.4.0",
36+
"babel-plugin-transform-object-rest-spread": "^6.23.0",
3637
"babel-plugin-transform-react-jsx": "^6.23.0",
3738
"babel-preset-env": "^1.2.2",
3839
"chalk": "^1.1.3",

0 commit comments

Comments
 (0)