Skip to content

Commit

Permalink
Replace browserify with webpack
Browse files Browse the repository at this point in the history
Although I love browserify/watchify, there have been some issues with
tree shaking making the bundle much bigger than it would need to be that
I just decided to use webpack/babel.

Recompilation under --watch now works much faster - originally I found
watchify to be much faster than webpack, but I guess that was fixed.
  • Loading branch information
jeremija committed May 3, 2020
1 parent ce44f80 commit 87b714f
Show file tree
Hide file tree
Showing 7 changed files with 10,492 additions and 8,847 deletions.
19,218 changes: 10,407 additions & 8,811 deletions package-lock.json

Large diffs are not rendered by default.

45 changes: 13 additions & 32 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,55 +10,40 @@
"peer-calls": "./lib/index.js"
},
"scripts": {
"start": "npm run css && npm run js:build && npm run start:server",
"start": "npm run css && npm run js && npm run start:server",
"start:server": "go run main.go",
"start:sfu": "PEERCALLS_NETWORK_TYPE=sfu go run main.go",
"start:watch": "chastifol [ npm run js:watch ] [ npm run css:watch ] [ npm run start:server ]",
"prepublishOnly": "npm run build",
"build": "npm run css && npm run ts && npm run js && npm run js:uglify",
"build": "npm run css && npm run js",
"build:go:linux": "make pack-linux",
"build:go": "make pack",
"test": "jest",
"test:go": "go test ./...",
"test:coverage": "jest --coverage",
"test:watch": "jest --watch",
"js": "browserify -g [ loose-envify purge --NODE_ENV production ] -t babelify ./lib/client/index.js -o ./build/index.prod.js",
"js:build": "browserify -p tsify ./src/client/index.tsx -v -d -o ./build/index.js",
"js:watch": "watchify -p tsify ./src/client/index.tsx -v -d -o ./build/index.js",
"js:uglify": "minify build/index.prod.js -o build/index.js",
"js": "webpack --config webpack.prod.js --optimize-minimize",
"js:watch": "webpack --config webpack.dev.js --watch",
"css": "node-sass ./src/scss/style.scss -o ./build/",
"css:watch": "npm run css && node-sass --watch ./src/scss/style.scss -o ./build/",
"lint": "eslint --ext ts,tsx .",
"lint:fix": "eslint --ext ts,tsx --fix .",
"ci": "npm run lint && npm run test:coverage && npm run build",
"ci": "npm run lint && npm run test:coverage && npm run ts && npm run build",
"ts:watch": "tsc --build . --watch --preserveWatchOutput",
"ts": "tsc --build .",
"clean": "rimraf lib/ tsconfig.tsbuildinfo build/*"
},
"babel": {
"presets": [
[
"@babel/preset-env",
{
"forceAllTransforms": true,
"targets": {
"browsers": [
"last 2 versions",
"safari >= 7",
"ie >= 11"
]
}
}
]
]
},
"author": "Jerko Steiner",
"license": "Apache-2.0",
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.8.7",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.9.6",
"@babel/polyfill": "^7.8.7",
"@babel/preset-env": "^7.8.7",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "^7.9.0",
"@types/classnames": "^2.2.10",
"@types/debug": "^4.1.5",
"@types/ejs": "^3.0.1",
Expand All @@ -78,20 +63,15 @@
"@types/supertest": "^2.0.8",
"@typescript-eslint/eslint-plugin": "^2.23.0",
"@typescript-eslint/parser": "^2.23.0",
"babel-core": "^7.0.0-bridge.0",
"babel-minify": "^0.5.1",
"babelify": "^10.0.0",
"browserify": "^16.5.1",
"babel-loader": "^8.1.0",
"chastifol": "^4.1.0",
"classnames": "^2.2.6",
"core-js": "^3.6.4",
"debug": "^4.1.1",
"eslint": "^6.8.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-react": "^7.19.0",
"jest": "^25.1.0",
"lodash": "^4.17.15",
"loose-envify": "^1.4.0",
"node-sass": "^4.13.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
Expand All @@ -107,9 +87,10 @@
"supertest": "^4.0.2",
"ts-jest": "^25.2.1",
"ts-node": "^8.6.2",
"tsify": "^4.0.1",
"typescript": "^3.8.3",
"watchify": "^3.11.1",
"webpack": "^4.43.0",
"webpack-bundle-analyzer": "^3.7.0",
"webpack-cli": "^3.3.11",
"webrtc-adapter": "^7.5.0"
}
}
6 changes: 3 additions & 3 deletions src/client/components/Notifications.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import CSSTransition from 'react-transition-group/CSSTransition'
import TransitionGroup from 'react-transition-group/TransitionGroup'
import React from 'react'
import classnames from 'classnames'
import { dismissNotification, Notification } from '../actions/NotifyActions'
import { dismissNotification, Notification as NotificationType } from '../actions/NotifyActions'

export interface NotificationsProps {
notifications: Record<string, Notification>
notifications: Record<string, NotificationType>
dismiss: typeof dismissNotification
max: number
}
Expand All @@ -16,7 +16,7 @@ const transitionTimeout = {
}

export interface NotificationProps {
notification: Notification
notification: NotificationType
dismiss: typeof dismissNotification
timeout: number
}
Expand Down
2 changes: 1 addition & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"inlineSourceMap": true,
"inlineSources": true,
"lib": ["es2015", "dom"],
"target": "es3",
"target": "es2015",
"moduleResolution": "node",
"jsx": "react",
"noImplicitAny": true,
Expand Down
52 changes: 52 additions & 0 deletions webpack.common.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
const path = require('path')

module.exports = {
entry: './src/client/index.tsx',
// devtool: 'inline-source-map',
module: {
rules: [{
// test: /\.tsx?$/,
// use: 'ts-loader',
// exclude: /node_modules/,
// }, {
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-react',
], [
'@babel/preset-env',
{
'forceAllTransforms': true,
'targets': {
'browsers': [
'last 2 versions',
'safari >= 7',
'ie >= 11',
],
},
},
], [
'@babel/preset-typescript',
],
],
plugins: [
'@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-proposal-class-properties',
],
},
},
}],
},
resolve: {
extensions: ['.tsx', '.ts', '.js', '.mjs'],
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'build'),
},
mode: 'development',
}
10 changes: 10 additions & 0 deletions webpack.dev.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
const common = require('./webpack.common.js')
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

module.exports = {
...common,
// plugins: [
// new BundleAnalyzerPlugin(),
// ],
mode: 'development',
}
6 changes: 6 additions & 0 deletions webpack.prod.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
const common = require('./webpack.common.js')

module.exports = {
...common,
mode: 'production',
}

0 comments on commit 87b714f

Please sign in to comment.