Skip to content

Commit

Permalink
Upgraded to Babel 7, switched to css-modules
Browse files Browse the repository at this point in the history
Cleaned up example App.
Removed sass-loader.
Enabled css-modules as default.
Removed CopyWebpackPlugin.
Moved index.html to src/.
Dropped package-lock.json.
  • Loading branch information
Samuel Scheiderich committed Sep 5, 2018
1 parent 8752ebc commit 95971f0
Show file tree
Hide file tree
Showing 14 changed files with 153 additions and 17,628 deletions.
14 changes: 9 additions & 5 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"presets": [
[
"env",
"@babel/preset-env",
{
"targets": {
"browsers": [
Expand All @@ -14,12 +14,16 @@
"useBuiltIns": "entry"
}
],
"react"
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-syntax-dynamic-import"
],
"plugins": ["syntax-dynamic-import", "transform-object-rest-spread"],
"env": {
"test": {
"plugins": ["dynamic-import-node"]
"plugins": [
"dynamic-import-node"
]
}
}
}
}
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/node_modules/
/package-lock.json
/dist/
*~
1 change: 1 addition & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
package-lock=false
22 changes: 12 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@
## Features

- Webpack v4
- Babel loader (JSX for React, ES latest using env preset, dynamic import support)
- Sass (as the `.scss` file type) and css import loaders, extracted to a new file.
- eslint (Primarly non-style rules, but required semi-colons, singleQuotes for strings, and 'es5' comma list mode (and a couple others); using babel parser for non-standard support.)
- jest (configured to handle style and file imports, import and dynamic import syntax.)
- Static assets in `/public` are copied to the build folder (with special handling for index.html to inject the bundle entry files).
- Babel loader (Babel 7 with JSX for React, ES latest using env preset, dynamic import support).
- css module import loaders, extracted to a stylesheet file in production.
- eslint (Primarly non-style rules, but requires singleQuotes for strings, and 'es5' comma list mode (and a couple others); using babel parser for non-standard support.)
- Jest (configured to handle style and file imports, import and dynamic import syntax.)
- File/url loaders to import static assets.

## What about...

- [CSS Modules](https://webpack.js.org/loaders/css-loader/#modules)
- Enabled by uncommenting `/* , modules: true */` in `webpack.config.js`.
- Disabled by commenting `modules: true` in css-loader options in `webpack.config.js`.
- Flow/Typescript
- Follow the respective instructions for adding these to a Webpack config/project. Assuming babel is doing the syntax conversion for these, eslint should work properly. Jest may need some extra work. (untested) (See loader note below)
- Less
- Replace sass-loader with less-loader and any packages less-loader needs. (See loader note below)
- Less/Sass
- Install sass-loader or less-loader and packages they need. Add `'sass-loader'` or `'less-loader'` after css-loader, and make `importLoaders` `2`. (Also see loader note below)
- Anything else
- Projects which are frequently used with Webpack often have instructions for how to integrate them. Extra babel plugins can just be directly added to .babelrc, and extra Webpack loaders can be added to webpack.config.js. (See loader note below)

Expand All @@ -26,16 +26,18 @@ If you add or change a Webpack loader, make sure that any newly handled file ext

## Running this project

You need a current version of Node.js installed (currently testing and building with 9.3.0, but latest LTS should be fine (and probably Node v6 as well)).
You need a current version of Node.js installed (currently testing and building with Node v10.8.0 and npm v6.2.0, but latest LTS should be fine).

Clone the project, and run `npm install` to install the dependencies. (This project does not include the package-lock.json, to encourage using the latest versions. Please file an issue if a dependency is out of date.)
Clone the project, and run `npm i` (shorthand for `npm install`) to install the dependencies. (This project does not include the package-lock.json, to encourage using the latest versions. Please file an issue if a dependency is out of date.)

Run the development server with `npm start`. This will open the test page in your browser, and rebuild then refresh the page on source changes.

You can also run the Webpack development build and source watcher with `npm run dev`, which will only recompile. (You might do this to use an external server).

You can make a production build of the bundle with `npm run build`.

Run tests with `npm test`. Run tests in watch mode with `npm test -- --watch`.

## Make it your own

`src/index.js` and `src/App.js` contain a basic example app. Replace these with your own app.

0 comments on commit 95971f0

Please sign in to comment.