build: Welcome ESM and Bye Bye UMD (#7441)
* build: Welcome ESM and Bye Bye UMD * remove package * create unbundled esm build * update script for example * fix typo * dummy commit * update autorelease script to build esm * revert dummy commit * move react, react-dom and testing library to dev dependencies * remove entry.js, publicPath and yarn install:deps script * fix * upgrade esbuild to fix glob import error for locales * remove webpack chunk names as thats not needed anymore * marking the code sideeffects free * make the library tree-shakeable and move fonts to fonts directory * allow side effects for css, scss files * remove tree-shaking * comment code for tree shaking * move to vite for example * bye bye webpack * ignore ts * separate build and output dir * use esbuild for creating bundle for example * update output dir * lint * create browser dev build with source maps and prod with minification * add dev and prod builds for bundler * lint * update script * remove await * load prod build * create minified build in dist * prod and dev builds using export field * remove import.meta * dummy * define import.meta prod and dev * fix * export types * add types field * typo * lint * Update scripts/buildPackage.js * move types inside export * newlinepull/7508/head
Aakansha Doshi
1 year ago
committed by
GitHub
parent
e6c3c06c2e
commit
a8064ba3ee
@ -1,4 +1,4 @@
|
||||
node_modules
|
||||
dist
|
||||
example
|
||||
types
|
||||
bundle.js
|
||||
bundle.css
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
import "./publicPath";
|
||||
import polyfill from "./polyfill";
|
||||
|
||||
import "../../public/fonts.css";
|
||||
|
||||
polyfill();
|
||||
export * from "./index";
|
||||
@ -1,11 +1,5 @@
|
||||
if (process.env.IS_PREACT === "true") {
|
||||
if (process.env.NODE_ENV === "production") {
|
||||
module.exports = require("./dist/excalidraw-with-preact.production.min.js");
|
||||
if (process.env.NODE_ENV !== "development") {
|
||||
import("./dist/dev/index.js");
|
||||
} else {
|
||||
module.exports = require("./dist/excalidraw-with-preact.development.js");
|
||||
}
|
||||
} else if (process.env.NODE_ENV === "production") {
|
||||
module.exports = require("./dist/excalidraw.production.min.js");
|
||||
} else {
|
||||
module.exports = require("./dist/excalidraw.development.js");
|
||||
import("./dist/prod/index.js");
|
||||
}
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
import { ENV } from "./constants";
|
||||
if (process.env.NODE_ENV !== ENV.TEST) {
|
||||
/* eslint-disable */
|
||||
/* global __webpack_public_path__:writable */
|
||||
__webpack_public_path__ =
|
||||
window.EXCALIDRAW_ASSET_PATH ||
|
||||
`https://unpkg.com/${process.env.VITE_PKG_NAME}@${process.env.VITE_PKG_VERSION}/dist/`;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
{
|
||||
"exclude": ["**/*.test.*", "tests", "types", "example", "dist"],
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"strict": true,
|
||||
"outDir": "dist",
|
||||
"skipLibCheck": true,
|
||||
"declaration": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"resolveJsonModule": true,
|
||||
"jsx": "react-jsx"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import { defineConfig, loadEnv } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
// To load .env.local variables
|
||||
const envVars = loadEnv("", `../../`);
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
root: "example/public",
|
||||
server: {
|
||||
port: 3001,
|
||||
// open the browser
|
||||
open: true,
|
||||
},
|
||||
publicDir: "public",
|
||||
});
|
||||
@ -1,28 +0,0 @@
|
||||
const path = require("path");
|
||||
const { merge } = require("webpack-merge");
|
||||
|
||||
const devConfig = require("./webpack.dev.config");
|
||||
|
||||
const devServerConfig = {
|
||||
entry: {
|
||||
bundle: "./example/index.tsx",
|
||||
},
|
||||
// Server Configuration options
|
||||
devServer: {
|
||||
port: 3001,
|
||||
host: "localhost",
|
||||
hot: true,
|
||||
compress: true,
|
||||
static: {
|
||||
directory: path.join(__dirname, "./example/public"),
|
||||
},
|
||||
client: {
|
||||
progress: true,
|
||||
logging: "info",
|
||||
overlay: true, //Shows a full-screen overlay in the browser when there are compiler errors or warnings.
|
||||
},
|
||||
open: ["./"],
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = merge(devServerConfig, devConfig);
|
||||
@ -1,108 +0,0 @@
|
||||
const path = require("path");
|
||||
const webpack = require("webpack");
|
||||
const autoprefixer = require("autoprefixer");
|
||||
const { parseEnvVariables } = require("./env");
|
||||
const outputDir = process.env.EXAMPLE === "true" ? "example/public" : "dist";
|
||||
|
||||
module.exports = {
|
||||
mode: "development",
|
||||
devtool: false,
|
||||
entry: {
|
||||
"excalidraw.development": "./entry.js",
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, outputDir),
|
||||
library: "ExcalidrawLib",
|
||||
libraryTarget: "umd",
|
||||
filename: "[name].js",
|
||||
chunkFilename: "excalidraw-assets-dev/[name]-[contenthash].js",
|
||||
assetModuleFilename: "excalidraw-assets-dev/[name][ext]",
|
||||
publicPath: "",
|
||||
},
|
||||
resolve: {
|
||||
extensions: [".js", ".ts", ".tsx", ".css", ".scss"],
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(sa|sc|c)ss$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
"style-loader",
|
||||
{ loader: "css-loader" },
|
||||
{
|
||||
loader: "postcss-loader",
|
||||
options: {
|
||||
postcssOptions: {
|
||||
plugins: [autoprefixer()],
|
||||
},
|
||||
},
|
||||
},
|
||||
"sass-loader",
|
||||
],
|
||||
},
|
||||
// So that type module works with webpack
|
||||
// https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
|
||||
{
|
||||
test: /\.m?js/,
|
||||
resolve: {
|
||||
fullySpecified: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(ts|tsx|js|jsx|mjs)$/,
|
||||
exclude:
|
||||
/node_modules[\\/](?!(browser-fs-access|canvas-roundrect-polyfill))/,
|
||||
use: [
|
||||
{
|
||||
loader: "import-meta-loader",
|
||||
},
|
||||
{
|
||||
loader: "ts-loader",
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
configFile: path.resolve(__dirname, "../tsconfig.dev.json"),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(woff|woff2|eot|ttf|otf)$/,
|
||||
type: "asset/resource",
|
||||
},
|
||||
],
|
||||
},
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
chunks: "async",
|
||||
cacheGroups: {
|
||||
vendors: {
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
name: "vendor",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
new webpack.EvalSourceMapDevToolPlugin({ exclude: /vendor/ }),
|
||||
new webpack.DefinePlugin({
|
||||
"process.env": parseEnvVariables(
|
||||
path.resolve(__dirname, "../../.env.development"),
|
||||
),
|
||||
}),
|
||||
],
|
||||
externals: {
|
||||
react: {
|
||||
root: "React",
|
||||
commonjs2: "react",
|
||||
commonjs: "react",
|
||||
amd: "react",
|
||||
},
|
||||
"react-dom": {
|
||||
root: "ReactDOM",
|
||||
commonjs2: "react-dom",
|
||||
commonjs: "react-dom",
|
||||
amd: "react-dom",
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,32 +0,0 @@
|
||||
const prodConfig = require("./webpack.prod.config");
|
||||
const devConfig = require("./webpack.dev.config");
|
||||
|
||||
const isProd = process.env.NODE_ENV === "production";
|
||||
|
||||
const config = isProd ? prodConfig : devConfig;
|
||||
const outputFile = isProd
|
||||
? "excalidraw-with-preact.production.min"
|
||||
: "excalidraw-with-preact.development";
|
||||
|
||||
const preactWebpackConfig = {
|
||||
...config,
|
||||
entry: {
|
||||
[outputFile]: "./entry.js",
|
||||
},
|
||||
externals: {
|
||||
...config.externals,
|
||||
"react-dom/client": {
|
||||
root: "ReactDOMClient",
|
||||
commonjs2: "react-dom/client",
|
||||
commonjs: "react-dom/client",
|
||||
amd: "react-dom/client",
|
||||
},
|
||||
"react/jsx-runtime": {
|
||||
root: "ReactJSXRuntime",
|
||||
commonjs2: "react/jsx-runtime",
|
||||
commonjs: "react/jsx-runtime",
|
||||
amd: "react/jsx-runtime",
|
||||
},
|
||||
},
|
||||
};
|
||||
module.exports = preactWebpackConfig;
|
||||
@ -1,131 +0,0 @@
|
||||
const path = require("path");
|
||||
const webpack = require("webpack");
|
||||
const autoprefixer = require("autoprefixer");
|
||||
const { parseEnvVariables } = require("./env");
|
||||
const TerserPlugin = require("terser-webpack-plugin");
|
||||
const BundleAnalyzerPlugin =
|
||||
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
|
||||
|
||||
module.exports = {
|
||||
mode: "production",
|
||||
entry: {
|
||||
"excalidraw.production.min": "./entry.js",
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
library: "ExcalidrawLib",
|
||||
libraryTarget: "umd",
|
||||
filename: "[name].js",
|
||||
chunkFilename: "excalidraw-assets/[name]-[contenthash].js",
|
||||
assetModuleFilename: "excalidraw-assets/[name][ext]",
|
||||
publicPath: "",
|
||||
},
|
||||
resolve: {
|
||||
extensions: [".js", ".ts", ".tsx", ".css", ".scss"],
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(sa|sc|c)ss$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
"style-loader",
|
||||
{
|
||||
loader: "css-loader",
|
||||
},
|
||||
{
|
||||
loader: "postcss-loader",
|
||||
options: {
|
||||
postcssOptions: {
|
||||
plugins: [autoprefixer()],
|
||||
},
|
||||
},
|
||||
},
|
||||
"sass-loader",
|
||||
],
|
||||
},
|
||||
// So that type module works with webpack
|
||||
// https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
|
||||
{
|
||||
test: /\.m?js/,
|
||||
resolve: {
|
||||
fullySpecified: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(ts|tsx|js|jsx|mjs)$/,
|
||||
exclude:
|
||||
/node_modules[\\/](?!(browser-fs-access|canvas-roundrect-polyfill))/,
|
||||
use: [
|
||||
{
|
||||
loader: "import-meta-loader",
|
||||
},
|
||||
{
|
||||
loader: "ts-loader",
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
configFile: path.resolve(__dirname, "../tsconfig.prod.json"),
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: "babel-loader",
|
||||
options: {
|
||||
presets: [
|
||||
"@babel/preset-env",
|
||||
["@babel/preset-react", { runtime: "automatic" }],
|
||||
"@babel/preset-typescript",
|
||||
],
|
||||
plugins: [
|
||||
"transform-class-properties",
|
||||
"@babel/plugin-transform-runtime",
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(woff|woff2|eot|ttf|otf)$/,
|
||||
type: "asset/resource",
|
||||
},
|
||||
],
|
||||
},
|
||||
optimization: {
|
||||
minimize: true,
|
||||
minimizer: [
|
||||
new TerserPlugin({
|
||||
test: /\.js($|\?)/i,
|
||||
}),
|
||||
],
|
||||
splitChunks: {
|
||||
chunks: "async",
|
||||
cacheGroups: {
|
||||
vendors: {
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
name: "vendor",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
...(process.env.ANALYZER === "true" ? [new BundleAnalyzerPlugin()] : []),
|
||||
new webpack.DefinePlugin({
|
||||
"process.env": parseEnvVariables(
|
||||
path.resolve(__dirname, "../../.env.production"),
|
||||
),
|
||||
}),
|
||||
],
|
||||
externals: {
|
||||
react: {
|
||||
root: "React",
|
||||
commonjs2: "react",
|
||||
commonjs: "react",
|
||||
amd: "react",
|
||||
},
|
||||
"react-dom": {
|
||||
root: "ReactDOM",
|
||||
commonjs2: "react-dom",
|
||||
commonjs: "react-dom",
|
||||
amd: "react-dom",
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,35 @@
|
||||
import * as esbuild from "esbuild";
|
||||
import { sassPlugin } from "esbuild-sass-plugin";
|
||||
import { execSync } from "child_process";
|
||||
|
||||
const createDevBuild = async () => {
|
||||
return await esbuild.build({
|
||||
entryPoints: ["example/index.tsx"],
|
||||
outfile: "example/public/bundle.js",
|
||||
define: {
|
||||
"import.meta.env": "{}",
|
||||
},
|
||||
bundle: true,
|
||||
format: "esm",
|
||||
plugins: [sassPlugin()],
|
||||
loader: {
|
||||
".woff2": "dataurl",
|
||||
".html": "copy",
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const startServer = async (ctx) => {
|
||||
await ctx.serve({
|
||||
servedir: "example/public",
|
||||
port: 5001,
|
||||
});
|
||||
};
|
||||
execSync(
|
||||
`rm -rf example/public/dist && yarn build:esm && cp -r dist example/public`,
|
||||
);
|
||||
|
||||
const ctx = await createDevBuild();
|
||||
|
||||
// await startServer(ctx);
|
||||
// console.info("Hosted at port http://localhost:5001!!");
|
||||
@ -0,0 +1,135 @@
|
||||
const { build } = require("esbuild");
|
||||
const { sassPlugin } = require("esbuild-sass-plugin");
|
||||
const { externalGlobalPlugin } = require("esbuild-plugin-external-global");
|
||||
// Will be used later for treeshaking
|
||||
//const fs = require("fs");
|
||||
// const path = require("path");
|
||||
|
||||
// function getFiles(dir, files = []) {
|
||||
// const fileList = fs.readdirSync(dir);
|
||||
// for (const file of fileList) {
|
||||
// const name = `${dir}/${file}`;
|
||||
// if (
|
||||
// name.includes("node_modules") ||
|
||||
// name.includes("config") ||
|
||||
// name.includes("package.json") ||
|
||||
// name.includes("main.js") ||
|
||||
// name.includes("index-node.ts") ||
|
||||
// name.endsWith(".d.ts")
|
||||
// ) {
|
||||
// continue;
|
||||
// }
|
||||
|
||||
// if (fs.statSync(name).isDirectory()) {
|
||||
// getFiles(name, files);
|
||||
// } else if (
|
||||
// !(
|
||||
// name.match(/\.(sa|sc|c)ss$/) ||
|
||||
// name.match(/\.(woff|woff2|eot|ttf|otf)$/) ||
|
||||
// name.match(/locales\/[^/]+\.json$/)
|
||||
// )
|
||||
// ) {
|
||||
// continue;
|
||||
// } else {
|
||||
// files.push(name);
|
||||
// }
|
||||
// }
|
||||
// return files;
|
||||
// }
|
||||
|
||||
const browserConfig = {
|
||||
entryPoints: ["index.tsx"],
|
||||
bundle: true,
|
||||
format: "esm",
|
||||
plugins: [
|
||||
sassPlugin(),
|
||||
externalGlobalPlugin({
|
||||
react: "React",
|
||||
"react-dom": "ReactDOM",
|
||||
}),
|
||||
],
|
||||
splitting: true,
|
||||
loader: {
|
||||
".woff2": "copy",
|
||||
".ttf": "copy",
|
||||
},
|
||||
};
|
||||
const createESMBrowserBuild = async () => {
|
||||
// Development unminified build with source maps
|
||||
await build({
|
||||
...browserConfig,
|
||||
outdir: "dist/browser/dev",
|
||||
sourcemap: true,
|
||||
chunkNames: "excalidraw-assets-dev/[name]-[hash]",
|
||||
define: {
|
||||
"import.meta.env": JSON.stringify({ DEV: true }),
|
||||
},
|
||||
});
|
||||
|
||||
// production minified build without sourcemaps
|
||||
await build({
|
||||
...browserConfig,
|
||||
outdir: "dist/browser/prod",
|
||||
minify: true,
|
||||
chunkNames: "excalidraw-assets/[name]-[hash]",
|
||||
define: {
|
||||
"import.meta.env": JSON.stringify({ PROD: true }),
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// const BASE_PATH = `${path.resolve(`${__dirname}/..`)}`;
|
||||
// const filesinExcalidrawPackage = [
|
||||
// ...getFiles(`${BASE_PATH}/packages/excalidraw`),
|
||||
// `${BASE_PATH}/packages/utils/export.ts`,
|
||||
// `${BASE_PATH}/packages/utils/bbox.ts`,
|
||||
// ...getFiles(`${BASE_PATH}/public/fonts`),
|
||||
// ];
|
||||
|
||||
// const filesToTransform = filesinExcalidrawPackage.filter((file) => {
|
||||
// return !(
|
||||
// file.includes("/__tests__/") ||
|
||||
// file.includes(".test.") ||
|
||||
// file.includes("/tests/") ||
|
||||
// file.includes("example")
|
||||
// );
|
||||
// });
|
||||
|
||||
const rawConfig = {
|
||||
entryPoints: ["index.tsx"],
|
||||
bundle: true,
|
||||
format: "esm",
|
||||
plugins: [sassPlugin()],
|
||||
|
||||
loader: {
|
||||
".woff2": "copy",
|
||||
".ttf": "copy",
|
||||
".json": "copy",
|
||||
},
|
||||
packages: "external",
|
||||
};
|
||||
|
||||
const createESMRawBuild = async () => {
|
||||
// Development unminified build with source maps
|
||||
await build({
|
||||
...rawConfig,
|
||||
sourcemap: true,
|
||||
outdir: "dist/dev",
|
||||
define: {
|
||||
"import.meta.env": JSON.stringify({ DEV: true }),
|
||||
},
|
||||
});
|
||||
|
||||
// production minified build without sourcemaps
|
||||
await build({
|
||||
...rawConfig,
|
||||
minify: true,
|
||||
outdir: "dist/prod",
|
||||
define: {
|
||||
"import.meta.env": JSON.stringify({ PROD: true }),
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
createESMRawBuild();
|
||||
createESMBrowserBuild();
|
||||
Loading…
Reference in New Issue