Fix issue with polyfilling node globals

This commit is contained in:
Andrew Kingston 2021-03-31 18:49:53 +01:00
parent 44ad38fdf8
commit a2bd824a1d
4 changed files with 4 additions and 187 deletions

View File

@ -1,138 +0,0 @@
import alias from "@rollup/plugin-alias"
import svelte from "rollup-plugin-svelte"
import resolve from "rollup-plugin-node-resolve"
import commonjs from "@rollup/plugin-commonjs"
import url from "rollup-plugin-url"
import livereload from "rollup-plugin-livereload"
import { terser } from "rollup-plugin-terser"
import builtins from "rollup-plugin-node-builtins"
import nodeglobals from "rollup-plugin-node-globals"
import copy from "rollup-plugin-copy"
import css from "rollup-plugin-css-only"
import replace from "rollup-plugin-replace"
import json from "@rollup/plugin-json"
import html from "rollup-plugin-html"
import path from "path"
const production = !process.env.ROLLUP_WATCH
const outputpath = "../server/builder"
const coreExternal = [
"lodash",
"lodash/fp",
"date-fns",
"lunr",
"safe-buffer",
"shortid",
"@nx-js/compiler-util",
]
const customResolver = resolve({
extensions: [
".mjs",
".js",
".jsx",
".json",
".sass",
".scss",
".svelte",
".css",
],
})
const projectRootDir = path.resolve(__dirname)
export default {
input: "src/main.js",
output: {
sourcemap: true,
format: "iife",
name: "app",
file: `${outputpath}/bundle.js`,
},
plugins: [
alias({
entries: [
{
find: "components",
replacement: path.resolve(projectRootDir, "src/components"),
},
{
find: "builderStore",
replacement: path.resolve(projectRootDir, "src/builderStore"),
},
{
find: "constants",
replacement: path.resolve(projectRootDir, "src/constants"),
},
{
find: "analytics",
replacement: path.resolve(projectRootDir, "src/analytics"),
},
],
customResolver,
}),
copy({
targets: [
{ src: "src/index.html", dest: outputpath },
{ src: "src/favicon.png", dest: outputpath },
{ src: "assets", dest: outputpath },
{
src: "../bbui/dist/bbui.css",
dest: outputpath,
},
{
src: "node_modules/remixicon/fonts/*",
dest: outputpath,
},
],
}),
replace({
"process.env.NODE_ENV": JSON.stringify(
production ? "production" : "development"
),
"process.env.POSTHOG_TOKEN": JSON.stringify(process.env.POSTHOG_TOKEN),
"process.env.POSTHOG_URL": JSON.stringify(process.env.POSTHOG_URL),
"process.env.SENTRY_DSN": JSON.stringify(process.env.SENTRY_DSN),
}),
svelte(),
// Export all CSS imported in the JS to it's own bundle.
// This is exclusively external stylesheets and vendor stylesheets.
// Svelte CSS is handled by the svelte plugin
css({
output: `external.css`,
}),
resolve({
browser: true,
dedupe: importee => {
return (
importee === "svelte" ||
importee.startsWith("svelte/") ||
coreExternal.includes(importee)
)
},
}),
commonjs(),
url({
limit: 0,
include: ["**/*.woff2", "**/*.png"],
fileName: "[dirname][name][extname]",
emitFiles: true,
}),
builtins(),
nodeglobals(),
// Watch the `dist` directory and refresh the
// browser on changes when not in production
!production && livereload({ watch: outputpath, delay: 500, port: 35730 }),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser(),
json(),
html(),
],
}

View File

@ -1,46 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
body, html {
height: 100% !important;
font-family: Inter, sans-serif !important;
margin: 0 !important;
}
*, *:before, *:after {
box-sizing: border-box;
}
</style>
<script src='/assets/budibase-client.js'></script>
<script>
function receiveMessage(event) {
if (!event.data) {
return
}
// Extract data from message
const { selectedComponentId, layout, screen, previewType, appId } = JSON.parse(event.data)
// Set some flags so the app knows we're in the builder
window["##BUDIBASE_IN_BUILDER##"] = true
window["##BUDIBASE_APP_ID##"] = appId
window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout
window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
window["##BUDIBASE_PREVIEW_TYPE##"] = previewType
// Initialise app
if (window.loadBudibase) {
loadBudibase()
}
}
window.addEventListener("message", receiveMessage)
window.dispatchEvent(new Event("bb-ready"))
</script>
</head>
<body>
</body>
</html>

View File

@ -35,7 +35,6 @@
"rollup-plugin-node-builtins": "^2.1.2",
"rollup-plugin-node-globals": "^1.4.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-polyfill-node": "^0.6.2",
"rollup-plugin-terser": "^7.0.2",
"typescript": "^4.1.3"
},

View File

@ -2,7 +2,8 @@ import commonjs from "@rollup/plugin-commonjs"
import resolve from "rollup-plugin-node-resolve"
import json from "@rollup/plugin-json"
import { terser } from "rollup-plugin-terser"
import nodePolyfills from "rollup-plugin-polyfill-node"
import builtins from "rollup-plugin-node-builtins"
import globals from "rollup-plugin-node-globals"
const production = !process.env.ROLLUP_WATCH
@ -12,7 +13,8 @@ const plugins = [
preferBuiltins: true,
}),
commonjs(),
nodePolyfills(),
builtins(),
globals(),
production && terser(),
json(),
]