Search: Dictionary All Posts
Store Your Knowledge at the Brain Bank!
Webpack, Babel, ESLint - Parcel - create-react-app
By Jamie in Lessons / Programming - React 2.6.19 (Source)
Summary - By running npm create-react-app a ton of stuff happens behind the scenes.
0 Loves
create-react-app creates the webpack, babel and eslint so that you don't have to do all of the following. But if you are the senior lead on your team and the one setting up the project for the first time, you may want to manually do all these things in order to follow your company's specific guidelines. Or perhaps you are not using React? See the source link for detailed instructions.
Webpack - a bundler. it takes all of the files of an app and bundles/combines them before publication. This makes the code super fast, and could solve a speed bottleneck issue.
It takes a good amount of time configuring. It uses a json config file and bundles everything starting at the given base path. It goes to the base path and follows all of the files of the app. It then runs through all its other set properties in the json file and applies them to the bundle, like setting up a dev server, or startup scripts, or running all files through modules like babel and eslint and it sets the output path where the end result of all this will be stored, usually a ./dist folder (distribution)
Babel - transpiles es6 code to es5 code so that any browser can use it, yet the developer can still write in all the es6 code
ESLint - checks for es5 syntax errors and other basic errors so devs don't publish code with errors
Babel-ESLint - Package that tells ESLint to check for es6 code errors too. Devs can also set here what linting package/guidelines they would like to follow. So they can set rules individually, or use a general guide like the popular Airbnb package which says to follow airbnb specific guidelines.
A NEW BUNDLER WITH NO CONFIGURATION
Parcel - is bundler without any configuration. It reads your index.js file, then works from there and figures out all of the things that are needed based on what it finds. It will typically use babel, eslint, etc, before compiling, but there is no way to configure manually, which some might not like. Though as it develops and gets smart, more and more people will go with this option, especially for small or single developer projects.
Go here for quick setup instructions...
Webpack - a bundler. it takes all of the files of an app and bundles/combines them before publication. This makes the code super fast, and could solve a speed bottleneck issue.
It takes a good amount of time configuring. It uses a json config file and bundles everything starting at the given base path. It goes to the base path and follows all of the files of the app. It then runs through all its other set properties in the json file and applies them to the bundle, like setting up a dev server, or startup scripts, or running all files through modules like babel and eslint and it sets the output path where the end result of all this will be stored, usually a ./dist folder (distribution)
Babel - transpiles es6 code to es5 code so that any browser can use it, yet the developer can still write in all the es6 code
ESLint - checks for es5 syntax errors and other basic errors so devs don't publish code with errors
Babel-ESLint - Package that tells ESLint to check for es6 code errors too. Devs can also set here what linting package/guidelines they would like to follow. So they can set rules individually, or use a general guide like the popular Airbnb package which says to follow airbnb specific guidelines.
A NEW BUNDLER WITH NO CONFIGURATION
Parcel - is bundler without any configuration. It reads your index.js file, then works from there and figures out all of the things that are needed based on what it finds. It will typically use babel, eslint, etc, before compiling, but there is no way to configure manually, which some might not like. Though as it develops and gets smart, more and more people will go with this option, especially for small or single developer projects.
Go here for quick setup instructions...