mirror
/
photoview
mirror of https://github.com/photoview/photoview.git
1
Fork 0
Code

Add build and watch mode

This commit is contained in:
viktorstrate 2021-02-25 13:23:22 +01:00
parent c80e25f8b0
commit 58bc7b8d5f
No known key found for this signature in database
GPG Key ID: 3F855605109C1E8A
3 changed files with 38 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ui/build.js
View File

@ -1,22 +1,25 @@
const fs = require('fs') const fs = require('fs')
const esbuild = require('esbuild')
const bs = require('browser-sync').create() const bs = require('browser-sync').create()
const historyApiFallback = require('connect-history-api-fallback') const historyApiFallback = require('connect-history-api-fallback')
const production = process.env.NODE_ENV == 'production' const production = process.env.NODE_ENV == 'production'
const watchMode = process.argv[2] == 'watch'
let builderPromise = require('esbuild').build({ const esbuildOptions = {
entryPoints: ['src/index.js'], entryPoints: ['src/index.js'],
publicPath: '/',
outdir: 'dist', outdir: 'dist',
// format: 'esm', format: 'esm',
bundle: true, bundle: true,
platform: 'browser', platform: 'browser',
target: ['chrome58', 'firefox57', 'safari11', 'edge16'], target: ['chrome58', 'firefox57', 'safari11', 'edge16'],
// splitting: true, splitting: true,
minify: production, minify: production,
sourcemap: !production, sourcemap: !production,
loader: { loader: {
'.js': 'jsx', '.js': 'jsx',
'.svg': 'text', '.svg': 'file',
'.woff': 'file', '.woff': 'file',
'.woff2': 'file', '.woff2': 'file',
'.ttf': 'file', '.ttf': 'file',
@ -24,24 +27,35 @@ let builderPromise = require('esbuild').build({
'.png': 'file', '.png': 'file',
}, },
define: { define: {
'process.env.PHOTOVIEW_API_ENDPOINT': '"http://localhost:4001/"',
'process.env.NODE_ENV': '"development"', 'process.env.NODE_ENV': '"development"',
}, },
incremental: true, incremental: watchMode,
}) }
fs.rmdirSync('dist/', {
recursive: true,
})
fs.mkdirSync('dist/')
fs.copyFileSync('src/index.html', 'dist/index.html') fs.copyFileSync('src/index.html', 'dist/index.html')
bs.init({ if (watchMode) {
let builderPromise = esbuild.build(esbuildOptions)
bs.init({
server: { server: {
baseDir: './dist', baseDir: './dist',
middleware: [historyApiFallback()], middleware: [historyApiFallback()],
}, },
port: 1234, port: 1234,
open: false, open: false,
}) })
bs.watch('src/**/*.js').on('change', async args => { bs.watch('src/**/*.js').on('change', async args => {
console.log('reloading', args) console.log('reloading', args)
builderPromise = (await builderPromise).rebuild() builderPromise = (await builderPromise).rebuild()
bs.reload(args) bs.reload(args)
}) })
} else {
esbuild.buildSync(esbuildOptions)
}

4
ui/package.json
View File

@ -23,8 +23,8 @@
"url-join": "^4.0.1" "url-join": "^4.0.1"
}, },
"scripts": { "scripts": {
"start": "parcel start src/index.html", "start": "node build.js watch",
"build": "parcel build src/index.html --no-source-maps", "build": "NODE_ENV=production node build.js",
"test": "npm run lint && npm run jest", "test": "npm run lint && npm run jest",
"lint": "eslint ./src --max-warnings 0 --cache", "lint": "eslint ./src --max-warnings 0 --cache",
"jest": "jest" "jest": "jest"

4
ui/src/index.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="manifest" href="./manifest.webmanifest" /> <link rel="manifest" href="./manifest.webmanifest" />
<link rel="stylesheet" href="/src/index.css" />
<!-- Apple touch devices --> <!-- Apple touch devices -->
<link rel="apple-touch-icon" href="./assets/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="./assets/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="Photoview" /> <meta name="apple-mobile-web-app-title" content="Photoview" />
@ -13,6 +15,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script src="/index.js"></script> <script type="module" src="/src/index.js"></script>
</body> </body>
</html> </html>