Comments (2)
First case does not work as expected. If the passed in env has undefined value for 'mode' or 'presets', the 'pulled out' values will stay undefined.
Correct version would be:
module.exports = ({ mode: mode = "production", presets: presets = []} = { mode, presets})
I like the second, less hipster version more.
Example is here:
https://repl.it/@gabberr/webpack-env-destructuring
@TheLarkInn I can open PR for this, which version should go in?
from webpack-workshop-2018.
Wish I had come to this thread earlier!
At first I thought it might just be a node thing, but the following code does not work as expected in the browser either:
let env = {mode: 'mode'}
testConfig = ({mode, presets} = {mode: 'production', presets: []}) => {
console.log(mode);
console.log(presets)
}
testConfig(env) // 'mode' undefined
testConfig() // 'production' []
If no env variable is passed in, the mode and presets properties are correctly assigned the default values.
However, if any sort of env is passed in, the default values will not be applied to undefined properties of that env variable. This is because the default is only applied when the expression to the left of the assignment is wholly undefined. As long as some sort of env is passed, the default assignment will not be made to the destructured properties.
The provided alternative
module.exports = ({ mode = 'production', presets = [] }) =>
properly sets the default presets property if one isn't passed in, but cannot handle a runtime where no env is passed in - will throw a destructuring err (cannot read properties mode / presets of undefined or null)
For myself, I decided the most straightforward way to handle this was to keep the provided destructuring syntax
({mode, presets} = {mode: 'production', presets: []})
so that the config can handle absent env variables. To adjust for the undefined presets, I added the following line before the call to webpackMerge:
presets = presets || [];
There is an identical line in the loadPresets.js file that can be omitted once this is included.
from webpack-workshop-2018.
Related Issues (16)
- Contact Information HOT 1
- Need Slides broken up according to the 3 courses
- webpack.config.js not getting picked up properly HOT 3
- Production build is throwing webpack error HOT 4
- Treeshaking issue in branch 'feature/031-all-module-types' HOT 3
- Server side rendering with webpack HOT 1
- Loading multiple presets HOT 2
- Uncaught TypeError: Cannot read property 'call' of undefined HOT 5
- Failed at the [email protected] build script.
- npm install failed HOT 1
- Change in api for webpack-merge
- webpack --watch is not recompling changed file HOT 1
- Add branch for starting with the webpack-dev-server step HOT 4
- Can't get Typescript preset to work HOT 2
- Remove extra branch by fixing previous branches HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack-workshop-2018.