Skip to content

Commit 383d9ce

Browse files
brauliodiezbrauliodiez
authored
Merge pull request #219 from jwellwood/duplicate-checker
add duplicate package checker
2 parents 3d965a9 + fd2741f commit 383d9ce

24 files changed

Lines changed: 540 additions & 0 deletions

‎version 4/05 Misc/08 Duplicate Package Checker/.babelrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": ["@babel/preset-env", "@babel/preset-react"],
3+
"plugins": ["react-hot-loader/babel"]
4+
}

‎version 4/05 Misc/08 Duplicate Package Checker/.eslintrc.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"extends": [
3+
"plugin:@typescript-eslint/recommended",
4+
"plugin:react/recommended"
5+
],
6+
"env": {
7+
"browser": true,
8+
"node": true
9+
},
10+
"parser": "@typescript-eslint/parser",
11+
"plugins": ["@typescript-eslint"],
12+
"rules": {
13+
"@typescript-eslint/no-var-requires": 0
14+
},
15+
"settings": {
16+
"react": {
17+
"version": "detect"
18+
}
19+
}
20+
}

‎version 4/05 Misc/08 Duplicate Package Checker/.prettierrc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "es5",
4+
"endOfLine": "lf"
5+
}

‎version 4/05 Misc/08 Duplicate Package Checker/README.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# 08 Duplicate Package Checker
2+
3+
In this section we are going to install and configure the [Duplicate Package Checker](https://github.com/darrenscerri/duplicate-package-checker-webpack-plugin) plugin which will check our bundle and warn us if we have multiple versions of the same package installed.
4+
5+
## Note:
6+
7+
> In a small app like this it's unlikely that this plugin is needed. However, in a large app with changing versions and more complexity it can give peace of mind that you won't be including multiple versions of the same package accidentally.
8+
9+
We will start from sample \_03 Environments/07 Webpack Monitor
10+
11+
## Summary:
12+
13+
- Install the plugin.
14+
- Add the plugin to the webpack config file required.
15+
16+
# Steps to build it
17+
18+
## Prerequisites
19+
20+
You will need to have nodejs installed in your computer. If you want to follow this step guides you will need to take as starting point sample _07 Webpack Monitor_
21+
22+
## Steps
23+
24+
- Run `npm install` to install previous sample packages:
25+
26+
1. Let's begin by installing the plugin to our dev dependencies:
27+
28+
```
29+
npm install duplicate-package-checker-webpack-plugin --save-dev
30+
31+
```
32+
33+
2. Now we'll add the plugin to our _dev.webpack.config.js_:
34+
35+
_./dev.webpack.config.js_
36+
37+
```diff
38+
const merge = require('webpack-merge');
39+
const base = require('./base.webpack.config.js');
40+
const Dotenv = require('dotenv-webpack');
41+
const WebpackMonitor = require('webpack-monitor');
42+
+ const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
43+
```
44+
45+
3. Add the following entry into the plugins array:
46+
47+
_./dev.webpack.config.js_
48+
49+
```diff
50+
plugins: [
51+
...
52+
+ new DuplicatePackageCheckerPlugin(),
53+
],
54+
```
55+
56+
4. That's it! On running a build `npm run build:dev` you will be warned about any duplicate packages.
57+
58+
### Options
59+
60+
If you want more control over the feedback you can pass a config object:
61+
62+
```diff
63+
plugins: [
64+
...
65+
+ new DuplicatePackageCheckerPlugin({
66+
// Also show module that is requiring each duplicate package (default: false)
67+
+ verbose: true,
68+
// Emit errors instead of warnings (default: false)
69+
+ emitError: true,
70+
// Show help message if duplicate packages are found (default: true)
71+
+ showHelp: false,
72+
// Warn also if major versions differ (default: true)
73+
+ strict: false,
74+
}),
75+
],
76+
```
77+
78+
If you have found a duplicate, dealing with it depends on your individual use case. Some ideas:
79+
80+
- Webpack `resolve alias`. We already have this setup in our webpack configs e.g. `alias: {jquery: 'jquery/dist/jquery.slim.js',}`. It configures Webpack to route any package references to a single specified path.
81+
- `npm dedupe` See [this](https://stackoverflow.com/questions/52781142/what-is-deduped-in-npm-packages-list) stack overflow post.
82+
- Bump your dependencies - update them to the latest usable version

‎version 4/05 Misc/08 Duplicate Package Checker/base.webpack.config.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
const HtmlWebpackPlugin = require('html-webpack-plugin');
2+
const webpack = require('webpack');
3+
const path = require('path');
4+
const basePath = __dirname;
5+
6+
module.exports = {
7+
context: path.join(basePath, 'src'),
8+
resolve: {
9+
extensions: ['.js', '.jsx', '.ts', '.tsx'],
10+
alias: {
11+
jquery: 'jquery/dist/jquery.slim.js',
12+
},
13+
},
14+
entry: {
15+
app: ['regenerator-runtime/runtime', './index.tsx'],
16+
appStyles: [
17+
'./mystyles.scss',
18+
'./averageComponentStyles.scss',
19+
'./totalScoreComponentStyles.scss',
20+
],
21+
vendorStyles: ['../node_modules/bootstrap/dist/css/bootstrap.css'],
22+
},
23+
optimization: {
24+
splitChunks: {
25+
cacheGroups: {
26+
vendor: {
27+
chunks: 'all',
28+
name: 'vendor',
29+
test: /[\\/]node_modules[\\/]/,
30+
enforce: true,
31+
},
32+
},
33+
},
34+
},
35+
module: {
36+
rules: [
37+
{
38+
test: /\.tsx?$/,
39+
exclude: /node_modules/,
40+
enforce: 'pre',
41+
loader: 'eslint-loader',
42+
},
43+
{
44+
test: /\.(ts|tsx)$/,
45+
exclude: /node_modules/,
46+
loader: 'awesome-typescript-loader',
47+
options: {
48+
useBabel: true,
49+
babelCore: '@babel/core', // needed for Babel v7
50+
},
51+
},
52+
{
53+
test: /\.jsx?$/,
54+
exclude: /node_modules/,
55+
loader: 'babel-loader',
56+
},
57+
{
58+
test: /\.(png|jpg)$/,
59+
exclude: /node_modules/,
60+
loader: 'url-loader?limit=5000',
61+
},
62+
{
63+
test: /\.html$/,
64+
loader: 'html-loader',
65+
},
66+
],
67+
},
68+
plugins: [
69+
//Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
70+
new HtmlWebpackPlugin({
71+
filename: 'index.html', //Name of file in ./dist/
72+
template: 'index.html', //Name of template in ./src
73+
}),
74+
new webpack.ProvidePlugin({
75+
$: 'jquery',
76+
jQuery: 'jquery',
77+
}),
78+
],
79+
};

‎version 4/05 Misc/08 Duplicate Package Checker/dev.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
API_BASE=http://localhost:8081/

‎version 4/05 Misc/08 Duplicate Package Checker/dev.webpack.config.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
const merge = require('webpack-merge');
2+
const base = require('./base.webpack.config.js');
3+
const Dotenv = require('dotenv-webpack');
4+
const WebpackMonitor = require('webpack-monitor');
5+
const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
6+
7+
module.exports = merge(base, {
8+
mode: 'development',
9+
resolve: {
10+
alias: {
11+
'react-dom': '@hot-loader/react-dom',
12+
},
13+
},
14+
output: {
15+
filename: '[name].js',
16+
},
17+
module: {
18+
rules: [
19+
{
20+
test: /\.scss$/,
21+
exclude: /node_modules/,
22+
use: [
23+
'style-loader',
24+
{
25+
loader: 'css-loader',
26+
options: {
27+
modules: {
28+
localIdentName: '[name]__[local]__[hash:base64:5]',
29+
},
30+
localsConvention: 'camelCase',
31+
},
32+
},
33+
{
34+
loader: 'sass-loader',
35+
options: {
36+
implementation: require('sass'),
37+
},
38+
},
39+
],
40+
},
41+
{
42+
test: /\.css$/,
43+
use: ['style-loader', 'css-loader'],
44+
},
45+
],
46+
},
47+
devtool: 'inline-source-map',
48+
devServer: {
49+
hot: true,
50+
},
51+
plugins: [
52+
new Dotenv({
53+
path: './dev.env',
54+
}),
55+
new WebpackMonitor({
56+
capture: true, // -> default 'true'
57+
target: '../monitor/myStatsStore.json', // default -> '../monitor/stats.json'
58+
launch: true, // -> default 'false'
59+
port: 3030, // default -> 8081
60+
}),
61+
new DuplicatePackageCheckerPlugin({
62+
emitError: true,
63+
}),
64+
],
65+
});

‎version 4/05 Misc/08 Duplicate Package Checker/package.json‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
{
2+
"name": "webpack-by-example",
3+
"version": "1.0.0",
4+
"description": "In this sample we are going to setup a web project that can be easily managed\r by webpack.",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "npm run start:dev",
8+
"start:dev": "webpack-dev-server --mode development --open --config dev.webpack.config.js",
9+
"start:prod": "node ./server",
10+
"build:dev": "rimraf dist && webpack --config dev.webpack.config.js",
11+
"build:prod": "rimraf dist && webpack --config prod.webpack.config.js",
12+
"build:perf": "rimraf dist && webpack --config perf.webpack.config.js"
13+
},
14+
"keywords": [],
15+
"author": "",
16+
"license": "ISC",
17+
"devDependencies": {
18+
"@babel/cli": "^7.6.4",
19+
"@babel/core": "^7.6.4",
20+
"@babel/preset-env": "^7.6.3",
21+
"@babel/preset-react": "^7.7.0",
22+
"@hot-loader/react-dom": "^16.11.0",
23+
"@types/jquery": "^3.3.31",
24+
"@types/react": "^16.9.11",
25+
"@types/react-dom": "^16.9.4",
26+
"@typescript-eslint/eslint-plugin": "^2.7.0",
27+
"@typescript-eslint/parser": "^2.7.0",
28+
"awesome-typescript-loader": "^5.2.1",
29+
"babel-loader": "^8.0.6",
30+
"compression-webpack-plugin": "^3.0.0",
31+
"css-loader": "^3.2.0",
32+
"dotenv-webpack": "^1.7.0",
33+
"duplicate-package-checker-webpack-plugin": "^3.0.0",
34+
"eslint": "^6.6.0",
35+
"eslint-loader": "^3.0.2",
36+
"eslint-plugin-react": "^7.16.0",
37+
"file-loader": "^4.2.0",
38+
"html-loader": "^0.5.5",
39+
"html-webpack-plugin": "^3.2.0",
40+
"mini-css-extract-plugin": "^0.8.0",
41+
"rimraf": "^3.0.0",
42+
"sass": "^1.23.3",
43+
"sass-loader": "^8.0.0",
44+
"style-loader": "^1.0.0",
45+
"typescript": "^3.7.2",
46+
"url-loader": "^2.2.0",
47+
"webpack": "^4.41.2",
48+
"webpack-bundle-analyzer": "^3.6.0",
49+
"webpack-cli": "^3.3.10",
50+
"webpack-dev-server": "^3.9.0",
51+
"webpack-merge": "^4.2.2",
52+
"webpack-monitor": "^1.0.14"
53+
},
54+
"dependencies": {
55+
"bootstrap": "^4.3.1",
56+
"compression": "^1.7.4",
57+
"express": "^4.17.1",
58+
"express-static-gzip": "^2.0.5",
59+
"jquery": "^3.5.1",
60+
"react": "^16.11.0",
61+
"react-dom": "^16.11.0",
62+
"react-hot-loader": "^4.12.17",
63+
"regenerator-runtime": "^0.13.3"
64+
}
65+
}

‎version 4/05 Misc/08 Duplicate Package Checker/perf.webpack.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const merge = require('webpack-merge');
2+
const prod = require('./prod.webpack.config.js');
3+
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
4+
5+
module.exports = merge(prod, {
6+
plugins: [new BundleAnalyzerPlugin()],
7+
});

‎version 4/05 Misc/08 Duplicate Package Checker/prod.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
API_BASE=https://myapp.api/

0 commit comments

Comments
 (0)