Skip to content

Commit 9715585

Browse files
tsl0922tsl0922
committed
Replace browserify with webpack
1 parent 2057ec5 commit 9715585

File tree

9 files changed

+3131
-831
lines changed

9 files changed

+3131
-831
lines changed

‎html/.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,4 @@ jspm_packages
4646
# Yarn Integrity file
4747
.yarn-integrity
4848

49-
js/bundle.js
49+
dist/

‎html/gulpfile.js‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
1-
var gulp = require('gulp'),
2-
fs = require("fs"),
3-
browserify = require('browserify'),
4-
inlinesource = require('gulp-inline-source');
1+
const gulp = require('gulp'),
2+
inlinesource = require('gulp-inline-source'),
3+
webpack = require('webpack-stream');
54

6-
gulp.task('browserify', function () {
7-
return browserify('./js/app.js')
8-
.transform("babelify", {
9-
presets: ["env"],
10-
global: true,
11-
ignore: /\/node_modules\/(?!zmodem.js\/)/
12-
})
13-
.bundle()
14-
.pipe(fs.createWriteStream("./js/bundle.js"));
5+
gulp.task('webpack', function() {
6+
return gulp.src([
7+
'js/app.js',
8+
'sass/app.scss'
9+
])
10+
.pipe(webpack(require('./webpack.config.js')))
11+
.pipe(gulp.dest('dist/'));
1512
});
1613

17-
gulp.task('inlinesource', ['browserify'], function () {
14+
gulp.task('inlinesource', ['webpack'], function () {
1815
return gulp.src('index.html')
1916
.pipe(inlinesource())
20-
.pipe(gulp.dest('../src'));
17+
.pipe(gulp.dest('../src/'));
2118
});
2219

2320
gulp.task('default', ['inlinesource']);

‎html/index.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
66
<title>ttyd - Terminal</title>
77
<link inline rel="icon" type="image/png" href="favicon.png">
8-
<link inline href="node_modules/bulma/css/bulma.css">
9-
<link inline href="node_modules/xterm/src/xterm.css">
10-
<link inline href="css/app.css">
8+
<link inline href="dist/bundle.css">
119
</head>
1210
<body>
1311
<div id="terminal-container"></div>
@@ -44,6 +42,6 @@
4442
</div>
4543
</div>
4644
<script src="auth_token.js"></script>
47-
<script inline src="js/bundle.js"></script>
45+
<script inline src="dist/bundle.js"></script>
4846
</body>
4947
</html>

‎html/js/app.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
require("babel-polyfill");
1+
// polyfills for ie11
2+
require('core-js/fn/array');
3+
require('core-js/fn/object');
4+
require('core-js/fn/promise');
5+
require('core-js/fn/typed');
26
require('fast-text-encoding');
37

48
var Zmodem = require('zmodem.js/src/zmodem_browser');

‎html/package.json‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,23 @@
1313
"build": "gulp"
1414
},
1515
"dependencies": {
16-
"babel-core": "^6.26.0",
17-
"babel-polyfill": "^6.26.0",
18-
"babel-preset-env": "^1.6.1",
19-
"babelify": "^8.0.0",
20-
"browserify": "^14.5.0",
2116
"bulma": "^0.6.1",
17+
"core-js": "^2.5.3",
2218
"fast-text-encoding": "^1.0.0",
23-
"gulp": "^3.9.1",
24-
"gulp-inline-source": "^3.0.0",
2519
"xterm": "^3.0.1",
2620
"zmodem.js": "^0.1.5"
21+
},
22+
"devDependencies": {
23+
"babel-core": "^6.26.0",
24+
"babel-loader": "^7.1.2",
25+
"babel-preset-env": "^1.6.1",
26+
"css-loader": "^0.28.8",
27+
"extract-text-webpack-plugin": "^3.0.2",
28+
"gulp": "^3.9.1",
29+
"gulp-inline-source": "^3.1.0",
30+
"node-sass": "^4.7.2",
31+
"sass-loader": "^6.0.6",
32+
"style-loader": "^0.19.1",
33+
"webpack-stream": "^4.0.0"
2734
}
2835
}

‎html/css/app.css‎ renamed to ‎html/sass/app.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
@import "~bulma/sass/utilities/_all";
2+
@import "~bulma/sass/base/helpers";
3+
@import "~bulma/sass/elements/box";
4+
@import "~bulma/sass/elements/button";
5+
@import "~bulma/sass/elements/form";
6+
@import "~bulma/sass/elements/progress";
7+
@import "~bulma/sass/components/modal";
8+
@import "~xterm/src/xterm.css";
9+
110
html, body {
211
height: 100%;
312
min-height: 100%;

‎html/webpack.config.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const ExtractTextPlugin = require("extract-text-webpack-plugin");
2+
3+
module.exports = {
4+
output: {
5+
filename: 'bundle.js'
6+
},
7+
module: {
8+
rules: [
9+
{
10+
test: /\.js$/,
11+
exclude: /node_modules\/(?!zmodem.js\/)/,
12+
use: {
13+
loader: 'babel-loader',
14+
options: {
15+
presets: ['env']
16+
}
17+
}
18+
}, {
19+
test: /\.scss$/,
20+
use: ExtractTextPlugin.extract({
21+
use: [{
22+
loader: "css-loader"
23+
}, {
24+
loader: "sass-loader"
25+
}],
26+
fallback: "style-loader"
27+
})
28+
}
29+
]
30+
},
31+
plugins: [
32+
new ExtractTextPlugin({
33+
filename: 'bundle.css',
34+
})
35+
]
36+
}

0 commit comments

Comments
 (0)