Skip to content

Commit e0d9a33

Browse files
chetoncheton
authored
Upgrade to Webpack 4 and Babel 7 (#58)
* Fix eslint warnings * Upgrade to Webpack 4 and Babel 7 * Update Node.js versions
1 parent 6878ad7 commit e0d9a33

File tree

9 files changed

+92
-81
lines changed

9 files changed

+92
-81
lines changed

‎.babelrc

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎.travis.yml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ os:
88
- linux
99

1010
node_js:
11+
- '10'
12+
- '8'
1113
- '6'
12-
- '5'
13-
- '4'
1414

1515
before_install:
1616
- npm install -g npm
@@ -36,4 +36,4 @@ deploy:
3636
on:
3737
# https://docs.travis-ci.com/user/deployment#Conditional-Releases-with-on
3838
tags: true # Deploy app only when a tag is applied to the commit
39-
node: '4'
39+
node: '6'

‎babel.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
extends: '@trendmicro/babel-config',
3+
presets: [
4+
'@babel/preset-env',
5+
'@babel/preset-react'
6+
]
7+
};

‎examples/.babelrc

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎examples/index.jsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ class App extends React.Component {
1717

1818
simpleList = null;
1919

20-
addMoreItems() {
20+
addMoreItems = () => {
2121
const items = [
2222
'Apple',
2323
'Banana',
@@ -33,8 +33,11 @@ class App extends React.Component {
3333
'Strawberry'
3434
];
3535
const i = random(0, items.length - 1);
36-
this.setState({ groupLeft: this.state.groupLeft.concat(items[i]) });
37-
}
36+
this.setState(state => ({
37+
groupLeft: state.groupLeft.concat(items[i])
38+
}));
39+
};
40+
3841
render() {
3942
const simpleList = this.state.simpleList.map((val, key) => (
4043
<li key={uniqueId()} data-id={val}>List Item {val}</li>
@@ -96,7 +99,7 @@ class App extends React.Component {
9699
<button
97100
type="button"
98101
className="btn btn-default"
99-
onClick={::this.addMoreItems}
102+
onClick={this.addMoreItems}
100103
>
101104
Add more items
102105
</button>
@@ -113,7 +116,6 @@ class App extends React.Component {
113116
}
114117
}}
115118
className="block-list"
116-
ref="group-left"
117119
onChange={(items) => {
118120
this.setState({ groupLeft: items });
119121
}}
@@ -135,7 +137,6 @@ class App extends React.Component {
135137
onChange={(items) => {
136138
this.setState({ groupRight: items });
137139
}}
138-
ref="group-right"
139140
>
140141
{groupRight}
141142
</Sortable>

‎examples/webpack.config.js

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
var path = require('path');
2-
var webpack = require('webpack');
3-
var HtmlWebpackPlugin = require('html-webpack-plugin');
4-
var stylusLoader = require('stylus-loader');
5-
var nib = require('nib');
1+
const path = require('path');
2+
const HtmlWebpackPlugin = require('html-webpack-plugin');
3+
const stylusLoader = require('stylus-loader');
4+
const nib = require('nib');
5+
const babelConfig = require('../babel.config');
66

77
module.exports = {
8+
mode: 'development',
89
devtool: 'source-map',
910
entry: path.resolve(__dirname, 'index.jsx'),
1011
output: {
@@ -28,19 +29,33 @@ module.exports = {
2829
{
2930
test: /\.jsx?$/,
3031
loader: 'babel-loader',
32+
options: {
33+
...babelConfig
34+
},
3135
exclude: /(node_modules|bower_components)/
3236
},
3337
{
3438
test: /\.styl$/,
3539
use: [
3640
'style-loader',
37-
'css-loader?camelCase&modules&importLoaders=1&localIdentName=[local]---[hash:base64:5]',
41+
{
42+
loader: 'css-loader',
43+
options: {
44+
modules: true,
45+
localIdentName: '[local]---[hash:base64:5]',
46+
camelCase: true,
47+
importLoaders: 1
48+
}
49+
},
3850
'stylus-loader'
3951
]
4052
},
4153
{
4254
test: /\.css$/,
43-
loader: 'style-loader!css-loader'
55+
use: [
56+
'style-loader',
57+
'css-loader'
58+
]
4459
},
4560
{
4661
test: /\.(png|jpg)$/,
@@ -64,11 +79,6 @@ module.exports = {
6479
]
6580
},
6681
plugins: [
67-
new webpack.LoaderOptionsPlugin({
68-
debug: true,
69-
}),
70-
new webpack.NamedModulesPlugin(),
71-
new webpack.NoEmitOnErrorsPlugin(),
7282
new stylusLoader.OptionsPlugin({
7383
default: {
7484
// nib - CSS3 extensions for Stylus

‎package.json

Lines changed: 35 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,15 @@
44
"description": "A React component built on top of Sortable (https://github.com/SortableJS/Sortable).",
55
"main": "lib/index.js",
66
"scripts": {
7-
"prepublish": "npm run lint && npm test && npm run build && npm run dist && npm run build-examples && npm run release",
7+
"prepublish": "npm run eslint && npm test && npm run build && npm run dist && npm run build-examples && npm run release",
88
"build": "babel --out-dir ./lib ./src",
9-
"build-examples": "cd examples; webpack",
10-
"dist": "webpack; BUILD_ENV=dist webpack",
9+
"build-examples": "cd examples; webpack-cli",
10+
"dist": "webpack-cli; BUILD_ENV=dist webpack-cli",
1111
"release": "mkdir -p releases; cp -f dist/react-sortable.js releases/react-sortable-${npm_package_version}.js; cp -f dist/react-sortable.min.js releases/react-sortable-${npm_package_version}.min.js",
12-
"lint": "eslint ./src",
13-
"lint:fix": "eslint --fix ./src",
14-
"precommit-check": "npm run lint",
15-
"test": "tap test/*.js --node-arg=--require --node-arg=babel-register --node-arg=--require --node-arg=babel-polyfill",
16-
"coveralls": "tap test/*.js --coverage --coverage-report=text-lcov --nyc-arg=--require --nyc-arg=babel-register --nyc-arg=--require --nyc-arg=babel-polyfill | coveralls",
12+
"eslint": "eslint ./src",
13+
"precommit-check": "npm run eslint",
14+
"test": "tap test/*.js --node-arg=--require --node-arg=@babel/register --node-arg=--require --node-arg=@babel/polyfill",
15+
"coveralls": "tap test/*.js --coverage --coverage-report=text-lcov --nyc-arg=--require --nyc-arg=@babel/register --nyc-arg=--require --nyc-arg=@babel/polyfill | coveralls",
1716
"dev": "cd examples; webpack-dev-server --hot --inline --host 0.0.0.0 --port 8000 --content-base ../docs"
1817
},
1918
"pre-commit": [
@@ -46,32 +45,36 @@
4645
"prop-types": ">=15.0.0"
4746
},
4847
"devDependencies": {
49-
"babel-cli": "^6.24.1",
50-
"babel-core": "^6.24.1",
51-
"babel-eslint": "^7.2.2",
52-
"babel-loader": "^6.4.1",
53-
"babel-plugin-transform-decorators-legacy": "^1.3.4",
54-
"babel-preset-es2015": "^6.24.1",
55-
"babel-preset-react": "^6.24.1",
56-
"babel-preset-stage-0": "^6.24.1",
57-
"coveralls": "^2.13.1",
58-
"eslint": "~3.19.0",
59-
"eslint-config-trendmicro": "~0.5.1",
60-
"eslint-loader": "~1.7.1",
61-
"eslint-plugin-import": "~2.2.0",
62-
"eslint-plugin-jsx-a11y": "~2.2.3",
63-
"eslint-plugin-react": "~6.10.3",
64-
"html-webpack-plugin": "^2.28.0",
65-
"lodash": "^4.17.4",
66-
"nib": "^1.1.2",
48+
"@babel/cli": "~7.2.3",
49+
"@babel/core": "~7.2.2",
50+
"@babel/polyfill": "~7.2.5",
51+
"@babel/preset-env": "~7.2.3",
52+
"@babel/preset-react": "~7.0.0",
53+
"@babel/register": "~7.0.0",
54+
"@trendmicro/babel-config": "~1.0.0-alpha",
55+
"@trendmicro/react-anchor": "~0.5.6",
56+
"@trendmicro/react-buttons": "~1.3.1",
57+
"babel-eslint": "~10.0.1",
58+
"babel-loader": "~8.0.4",
59+
"coveralls": "~3.0.2",
60+
"eslint": "~5.11.1",
61+
"eslint-config-trendmicro": "~1.4.1",
62+
"eslint-loader": "~2.1.1",
63+
"eslint-plugin-import": "~2.14.0",
64+
"eslint-plugin-jsx-a11y": "~6.1.2",
65+
"eslint-plugin-react": "~7.11.1",
66+
"html-webpack-plugin": "~3.2.0",
67+
"lodash": "~4.17.4",
68+
"nib": "~1.1.2",
6769
"react": ">=15.0.0",
6870
"react-dom": ">=15.0.0",
69-
"sortablejs": "^1.6.1",
70-
"stylus": "^0.54.5",
71-
"stylus-loader": "^3.0.1",
72-
"tap": "^10.3.2",
73-
"webpack": "^2.4.1",
74-
"webpack-dev-server": "^2.4.2",
71+
"sortablejs": "~1.6.1",
72+
"stylus-loader": "~3.0.1",
73+
"tap": "~12.1.1",
74+
"terser-webpack-plugin": "~1.2.1",
75+
"webpack": "~4.28.2",
76+
"webpack-cli": "~3.1.2",
77+
"webpack-dev-server": "~3.1.14",
7578
"which": "~1.2.14"
7679
}
7780
}

‎src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import Sortable from './Sortable';
1+
const Sortable = require('./Sortable').default;
22

33
module.exports = Sortable;

‎webpack.config.babel.js renamed to ‎webpack.config.js

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
1-
import path from 'path';
2-
import webpack from 'webpack';
3-
import pkg from './package.json';
1+
const path = require('path');
2+
const webpack = require('webpack');
3+
const TerserPlugin = require('terser-webpack-plugin');
4+
const pkg = require('./package.json');
45

56
const banner = pkg.name + ' v' + pkg.version + ' | (c) ' + new Date().getFullYear() + ' ' + pkg.author + ' | ' + pkg.license + ' | ' + pkg.homepage;
67
const env = process.env.BUILD_ENV;
7-
let plugins = [
8-
new webpack.BannerPlugin(banner)
9-
];
108

11-
if (env === 'dist') {
12-
plugins = plugins.concat([
13-
new webpack.optimize.UglifyJsPlugin({ minimize: true })
14-
]);
15-
}
16-
17-
export default {
9+
module.exports = {
10+
mode: 'production',
1811
entry: path.resolve(__dirname, 'lib/index.js'),
1912
output: {
2013
path: path.join(__dirname, 'dist'),
21-
filename: env === 'dist' ? 'react-sortable.min.js' : 'react-sortable.js',
14+
filename: (env === 'dist') ? 'react-sortable.min.js' : 'react-sortable.js',
2215
libraryTarget: 'umd',
2316
library: 'ReactSortable'
2417
},
25-
plugins: plugins,
18+
optimization: {
19+
minimizer: [
20+
(env === 'dist') && (
21+
new TerserPlugin()
22+
)
23+
].filter(Boolean)
24+
},
25+
plugins: [
26+
new webpack.BannerPlugin(banner),
27+
],
2628
externals: {
2729
'react': {
2830
root: 'React',

0 commit comments

Comments
 (0)