pub_soft/molstar
3
0
Fork 0
mirror of https://github.com/molstar/molstar.git synced 2026-06-04 13:30:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

add watch-viewer npm task for faster build times

Browse Source
This commit is contained in:
David Sehnal
2020-03-12 22:19:43 +01:00
parent 51fbb619e5
commit c91074ad91
5 changed files with 132 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -62,6 +62,8 @@ This project builds on experience from previous solutions:
### Build automatically on file save:
npm run watch
If working on just the viewer, ``npm run watch-viewer`` will provide shorter compile times.
### Build with debug mode enabled:
DEBUG=molstar npm run watch

2
package.json
View File

@@ -18,9 +18,11 @@
"build-extra": "cpx \"src/**/*.{scss,woff,woff2,ttf,otf,eot,svg,html,ico}\" lib/",
"build-webpack": "webpack --mode production",
"watch": "concurrently --kill-others \"npm:watch-tsc\" \"npm:watch-extra\" \"npm:watch-webpack\"",
"watch-viewer": "concurrently --kill-others \"npm:watch-tsc\" \"npm:watch-extra\" \"npm:watch-webpack-viewer\"",
"watch-tsc": "tsc --watch --incremental",
"watch-extra": "cpx \"src/**/*.{scss,woff,woff2,ttf,otf,eot,svg,html,ico}\" lib/ --watch",
"watch-webpack": "webpack -w --mode development --display minimal",
"watch-webpack-viewer": "webpack -w --mode development --display minimal --config ./webpack.config.viewer.js",
"serve": "http-server -p 1338",
"model-server": "node lib/servers/model/server.js",
"model-server-watch": "nodemon --watch lib lib/servers/model/server.js",

117
webpack.config.common.js Normal file
View File

@@ -0,0 +1,117 @@
const path = require('path');
const webpack = require('webpack');
const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const CircularDependencyPlugin = require('circular-dependency-plugin');
const sharedConfig = {
module: {
rules: [
{
test: /\.(woff2?|ttf|otf|eot|svg|html|ico)$/,
use: [{
loader: 'file-loader',
options: { name: '[name].[ext]' }
}]
},
{
test: /\.(s*)css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', 'resolve-url-loader', 'sass-loader'
]
}
]
},
plugins: [
// new CircularDependencyPlugin({
// include: [ path.resolve(__dirname, 'lib/') ],
// failOnError: false,
// cwd: process.cwd(),
// }),
new ExtraWatchWebpackPlugin({
files: [
'./lib/**/*.scss',
'./lib/**/*.html'
],
}),
new webpack.DefinePlugin({
__PLUGIN_VERSION_TIMESTAMP__: webpack.DefinePlugin.runtimeValue(() => `${new Date().valueOf()}`, true),
'process.env.DEBUG': JSON.stringify(process.env.DEBUG)
}),
new MiniCssExtractPlugin({ filename: 'app.css' })
],
resolve: {
modules: [
'node_modules',
path.resolve(__dirname, 'lib/')
],
},
devtool: ''
}
function createEntry(src, outFolder, outFilename, isNode) {
return {
node: isNode ? void 0 : { fs: 'empty' }, // TODO find better solution? Currently used in file-handle.ts
target: isNode ? 'node' : void 0,
entry: path.resolve(__dirname, `lib/${src}.js`),
output: { filename: `${outFilename}.js`, path: path.resolve(__dirname, `build/${outFolder}`) },
...sharedConfig
}
}
function createEntryPoint(name, dir, out) {
return {
node: { fs: 'empty' }, // TODO find better solution? Currently used in file-handle.ts
entry: path.resolve(__dirname, `lib/${dir}/${name}.js`),
output: { filename: `${name}.js`, path: path.resolve(__dirname, `build/${out}`) },
...sharedConfig
}
}
function createNodeEntryPoint(name, dir, out) {
return {
target: 'node',
entry: path.resolve(__dirname, `lib/${dir}/${name}.js`),
output: { filename: `${name}.js`, path: path.resolve(__dirname, `build/${out}`) },
externals: {
argparse: 'require("argparse")',
'node-fetch': 'require("node-fetch")',
'util.promisify': 'require("util.promisify")',
xhr2: 'require("xhr2")',
},
...sharedConfig
}
}
function createApp(name) { return createEntryPoint('index', `apps/${name}`, name) }
function createBrowserTest(name) { return createEntryPoint(name, 'tests/browser', 'tests') }
function createNodeApp(name) { return createNodeEntryPoint('index', `apps/${name}`, name) }
module.exports = {
createApp,
createEntry,
createBrowserTest,
createNodeEntryPoint,
createNodeApp
}
// module.exports = [
// createApp('viewer'),
// // createApp('basic-wrapper'),
// // createEntry('examples/proteopedia-wrapper/index', 'examples/proteopedia-wrapper', 'index'),
// // createEntry('apps/demos/lighting/index', 'demos/lighting', 'index'),
// // createNodeApp('state-docs'),
// // createNodeEntryPoint('preprocess', 'servers/model', 'model-server'),
// // createApp('model-server-query'),
// // createBrowserTest('font-atlas'),
// // createBrowserTest('marching-cubes'),
// // createBrowserTest('render-lines'),
// // createBrowserTest('render-mesh'),
// // createBrowserTest('render-shape'),
// // createBrowserTest('render-spheres'),
// // createBrowserTest('render-structure'),
// // createBrowserTest('render-text'),
// ]

96
webpack.config.js
View File

@@ -1,93 +1,9 @@
const path = require('path');
const webpack = require('webpack');
const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const CircularDependencyPlugin = require('circular-dependency-plugin');
const sharedConfig = {
module: {
rules: [
{
test: /\.(woff2?|ttf|otf|eot|svg|html|ico)$/,
use: [{
loader: 'file-loader',
options: { name: '[name].[ext]' }
}]
},
{
test: /\.(s*)css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', 'resolve-url-loader', 'sass-loader'
]
}
]
},
plugins: [
// new CircularDependencyPlugin({
// include: [ path.resolve(__dirname, 'lib/') ],
// failOnError: false,
// cwd: process.cwd(),
// }),
new ExtraWatchWebpackPlugin({
files: [
'./lib/**/*.scss',
'./lib/**/*.html'
],
}),
new webpack.DefinePlugin({
__PLUGIN_VERSION_TIMESTAMP__: webpack.DefinePlugin.runtimeValue(() => `${new Date().valueOf()}`, true),
'process.env.DEBUG': JSON.stringify(process.env.DEBUG)
}),
new MiniCssExtractPlugin({ filename: 'app.css' })
],
resolve: {
modules: [
'node_modules',
path.resolve(__dirname, 'lib/')
],
},
devtool: ''
}
function createEntry(src, outFolder, outFilename, isNode) {
return {
node: isNode ? void 0 : { fs: 'empty' }, // TODO find better solution? Currently used in file-handle.ts
target: isNode ? 'node' : void 0,
entry: path.resolve(__dirname, `lib/${src}.js`),
output: { filename: `${outFilename}.js`, path: path.resolve(__dirname, `build/${outFolder}`) },
...sharedConfig
}
}
function createEntryPoint(name, dir, out) {
return {
node: { fs: 'empty' }, // TODO find better solution? Currently used in file-handle.ts
entry: path.resolve(__dirname, `lib/${dir}/${name}.js`),
output: { filename: `${name}.js`, path: path.resolve(__dirname, `build/${out}`) },
...sharedConfig
}
}
function createNodeEntryPoint(name, dir, out) {
return {
target: 'node',
entry: path.resolve(__dirname, `lib/${dir}/${name}.js`),
output: { filename: `${name}.js`, path: path.resolve(__dirname, `build/${out}`) },
externals: {
argparse: 'require("argparse")',
'node-fetch': 'require("node-fetch")',
'util.promisify': 'require("util.promisify")',
xhr2: 'require("xhr2")',
},
...sharedConfig
}
}
function createApp(name) { return createEntryPoint('index', `apps/${name}`, name) }
function createBrowserTest(name) { return createEntryPoint(name, 'tests/browser', 'tests') }
function createNodeApp(name) { return createNodeEntryPoint('index', `apps/${name}`, name) }
const common = require('./webpack.config.common.js');
const createApp = common.createApp;
const createEntry = common.createEntry;
const createBrowserTest = common.createBrowserTest;
const createNodeEntryPoint = common.createNodeEntryPoint;
const createNodeApp = common.createNodeApp;
module.exports = [
createApp('viewer'),

5
webpack.config.viewer.js Normal file
View File

@@ -0,0 +1,5 @@
const common = require('./webpack.config.common.js');
const createApp = common.createApp;
module.exports = [
createApp('viewer')
]