Skip to content

Commit 60c2acd

Browse files
KonstimanKonstiman
committed
improved the npm start command
1 parent e7ce1f9 commit 60c2acd

3 files changed

Lines changed: 157 additions & 131 deletions

File tree

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,11 @@ Now you can run a local dev server:
2929

3030
npm start
3131

32-
Point your browser to one of the following addresses:
32+
Note: you can also set the skin in this step as an argument to the `npm start` command (e.g. `npm start -- --env skin=triple`).
33+
34+
The browser will automatically open a new window with the example specified by the skin.
35+
36+
Alternatively, you can point your browser to one of the following addresses:
3337

3438
http://localhost:8080/project_website/base.html
3539
http://localhost:8080/project_website/pubmed.html

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"test": "jest",
1111
"dev": "webpack --progress --watch --mode=development",
1212
"prod": "webpack --progress",
13-
"start": "webpack serve --progress --mode=development",
13+
"start": "webpack serve --progress --mode=development --env publicPath=http://localhost:8080/dist/",
1414
"lint": "eslint \"./vis/js/**/*.js?(x)\""
1515
},
1616
"repository": {

‎webpack.config.js‎

Lines changed: 151 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,155 +1,177 @@
1-
var config = require('./config.js');
2-
const path = require('path');
3-
const webpack = require('webpack');
4-
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
1+
var config = require("./config.js");
2+
const path = require("path");
3+
const webpack = require("webpack");
4+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
55

66
//const TARGET = process.env.npm_lifecycle_event;
77

8-
const common = {
9-
devtool: 'eval-source-map',
10-
entry: './vis/entrypoint.js',
8+
const getSkinExample = (skin) => {
9+
switch (skin) {
10+
case "":
11+
return ["/project_website/base.html"];
12+
case "covis":
13+
return ["/local_covis/"];
14+
case "triple":
15+
return ["/local_triple/map.html"];
16+
case "viper":
17+
return "/local_viper/";
18+
default:
19+
return false;
20+
}
21+
};
22+
23+
module.exports = (env) => {
24+
const { publicPath, skin } = { ...config, ...env };
25+
26+
return {
27+
devtool: "eval-source-map",
28+
entry: "./vis/entrypoint.js",
1129

1230
output: {
13-
path: path.resolve(__dirname, "dist"),
14-
//dev: specify a full path including protocol, production: specify full path excluding protocol
15-
publicPath: config.publicPath,
16-
filename: 'headstart.js',
17-
libraryTarget: 'var',
18-
library: 'headstart'
31+
path: path.resolve(__dirname, "dist"),
32+
//dev: specify a full path including protocol, production: specify full path excluding protocol
33+
publicPath: publicPath,
34+
filename: "headstart.js",
35+
libraryTarget: "var",
36+
library: "headstart",
1937
},
2038

2139
devServer: {
22-
static: {
23-
directory: path.resolve(__dirname, 'examples/'),
24-
},
25-
allowedHosts: "all",
26-
host: "0.0.0.0",
27-
devMiddleware: { publicPath: '/dist/' },
40+
open: getSkinExample(skin),
41+
static: {
42+
directory: path.resolve(__dirname, "examples/"),
43+
},
44+
allowedHosts: "all",
45+
devMiddleware: { publicPath: "/dist/" },
2846
},
2947

3048
resolve: {
31-
alias: {
32-
//
33-
'hypher': 'hypher/dist/jquery.hypher.js',
34-
'markjs': 'mark.js/dist/jquery.mark.js',
49+
alias: {
50+
//
51+
hypher: "hypher/dist/jquery.hypher.js",
52+
markjs: "mark.js/dist/jquery.mark.js",
3553

36-
// paths
37-
'templates': path.resolve(__dirname, 'vis/templates'),
38-
'images': path.resolve(__dirname, 'vis/images'),
39-
'lib': path.resolve(__dirname, 'vis/lib'),
40-
'styles': path.resolve(__dirname, 'vis/stylesheets'),
54+
// paths
55+
templates: path.resolve(__dirname, "vis/templates"),
56+
images: path.resolve(__dirname, "vis/images"),
57+
lib: path.resolve(__dirname, "vis/lib"),
58+
styles: path.resolve(__dirname, "vis/stylesheets"),
4159

42-
// modules
43-
'config': path.resolve(__dirname, 'vis/js/default-config.js'),
44-
'headstart': path.resolve(__dirname, 'vis/js/headstart.js'),
45-
'mediator': path.resolve(__dirname, 'vis/js/mediator.js'),
46-
'io' : path.resolve(__dirname, 'vis/js/io.js'),
60+
// modules
61+
config: path.resolve(__dirname, "vis/js/default-config.js"),
62+
headstart: path.resolve(__dirname, "vis/js/headstart.js"),
63+
mediator: path.resolve(__dirname, "vis/js/mediator.js"),
64+
io: path.resolve(__dirname, "vis/js/io.js"),
4765

48-
// building
49-
process: "process/browser",
50-
},
66+
// building
67+
process: "process/browser",
68+
},
5169
},
5270

5371
externals: {
54-
'chart': 'Chart'
72+
chart: "Chart",
5573
},
5674
plugins: [
57-
new webpack.ProvidePlugin({
58-
process: 'process/browser',
59-
}),
60-
new MiniCssExtractPlugin({
61-
// Options similar to the same options in webpackOptions.output
62-
// all options are optional
63-
filename: 'headstart.css',
64-
chunkFilename: '[id].css',
65-
ignoreOrder: false, // Enable to remove warnings about conflicting order
66-
}),
67-
// can be used for simulating env variables
68-
new webpack.EnvironmentPlugin({})
75+
new webpack.ProvidePlugin({
76+
process: "process/browser",
77+
}),
78+
new MiniCssExtractPlugin({
79+
// Options similar to the same options in webpackOptions.output
80+
// all options are optional
81+
filename: "headstart.css",
82+
chunkFilename: "[id].css",
83+
ignoreOrder: false, // Enable to remove warnings about conflicting order
84+
}),
85+
// can be used for simulating env variables
86+
new webpack.EnvironmentPlugin({}),
6987
],
7088
module: {
71-
rules: [
89+
rules: [
90+
{
91+
test: require.resolve("hypher/dist/jquery.hypher.js"),
92+
use: [
93+
{
94+
loader: "imports-loader",
95+
options: {
96+
imports: ["default jquery $", "default jquery jQuery"],
97+
},
98+
},
99+
],
100+
},
101+
{
102+
test: /lib\/*.js/,
103+
use: [
104+
{
105+
loader: "imports-loader",
106+
options: {
107+
imports: ["default jquery $", "default jquery jQuery"],
108+
},
109+
},
110+
],
111+
},
112+
{
113+
test: /.jsx?$/,
114+
resolve: { extensions: [".js", ".jsx"] },
115+
exclude: /node_modules/,
116+
use: [
117+
{
118+
loader: "babel-loader",
119+
options: {
120+
presets: ["@babel/preset-env", "@babel/preset-react"],
121+
},
122+
},
123+
],
124+
},
125+
{
126+
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
127+
use: [
128+
{
129+
loader:
130+
"url-loader?limit=10000&minetype=application/font-woff&name=/assets/[name].[ext]",
131+
},
132+
],
133+
},
134+
{
135+
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
136+
use: [{ loader: "file-loader?name=/assets/[name].[ext]" }],
137+
},
138+
{
139+
test: /\.png$/,
140+
use: [
141+
{
142+
loader: "file-loader?name=img/[name].[ext]",
143+
options: { exclude: /examples/ },
144+
},
145+
],
146+
},
147+
{
148+
test: /\.(sa|sc|c)ss$/,
149+
use: [
150+
{
151+
loader: "style-loader",
152+
},
72153
{
73-
test: require.resolve("hypher/dist/jquery.hypher.js"),
74-
use: [
75-
{
76-
loader: "imports-loader",
77-
options: {
78-
imports: [
79-
"default jquery $",
80-
"default jquery jQuery"
81-
]
82-
}
83-
}
84-
]
85-
}, {
86-
test: /lib\/*.js/,
87-
use: [
88-
{
89-
loader: "imports-loader",
90-
options: {
91-
imports: [
92-
"default jquery $",
93-
"default jquery jQuery"
94-
]
95-
}
96-
}
97-
]
98-
}, {
99-
test: /.jsx?$/,
100-
resolve: { extensions: [".js", ".jsx"] },
101-
exclude: /node_modules/,
102-
use: [
103-
{
104-
loader: 'babel-loader',
105-
options: {
106-
presets: ['@babel/preset-env', '@babel/preset-react']
107-
}
108-
}
109-
]
110-
}, {
111-
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
112-
use: [
113-
{ loader: 'url-loader?limit=10000&minetype=application/font-woff&name=/assets/[name].[ext]' }
114-
]
115-
}, {
116-
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
117-
use: [
118-
{ loader: 'file-loader?name=/assets/[name].[ext]' }
119-
]
120-
}, {
121-
test: /\.png$/,
122-
use: [
123-
{
124-
loader: 'file-loader?name=img/[name].[ext]',
125-
options: { exclude: /examples/ }
126-
},
127-
]
128-
}, {
129-
test: /\.(sa|sc|c)ss$/,
130-
use: [{
131-
loader: 'style-loader',
132-
}, {
133-
loader: MiniCssExtractPlugin.loader,
134-
options: { esModule: false },
135-
}, {
136-
loader: 'css-loader',
137-
}, {
138-
loader: 'sass-loader',
139-
options: {
140-
additionalData: `
141-
$skin: "${config.skin}";
154+
loader: MiniCssExtractPlugin.loader,
155+
options: { esModule: false },
156+
},
157+
{
158+
loader: "css-loader",
159+
},
160+
{
161+
loader: "sass-loader",
162+
options: {
163+
additionalData: `
164+
$skin: "${skin}";
142165
`,
143-
sassOptions: {
144-
includePaths: ["node_modules"]
145-
}
146-
}
166+
sassOptions: {
167+
includePaths: ["node_modules"],
147168
},
148-
],
169+
},
149170
},
150-
{ test: /\.csl$/, type: 'asset/source' }
151-
]
152-
}
171+
],
172+
},
173+
{ test: /\.csl$/, type: "asset/source" },
174+
],
175+
},
176+
};
153177
};
154-
155-
module.exports = common

0 commit comments

Comments
 (0)