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
|
node_modules
|
||||||
dist
|
|
||||||
example
|
|
||||||
types
|
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 !== "development") {
|
||||||
if (process.env.NODE_ENV === "production") {
|
import("./dist/dev/index.js");
|
||||||
module.exports = require("./dist/excalidraw-with-preact.production.min.js");
|
|
||||||
} else {
|
} else {
|
||||||
module.exports = require("./dist/excalidraw-with-preact.development.js");
|
import("./dist/prod/index.js");
|
||||||
}
|
|
||||||
} else if (process.env.NODE_ENV === "production") {
|
|
||||||
module.exports = require("./dist/excalidraw.production.min.js");
|
|
||||||
} else {
|
|
||||||
module.exports = require("./dist/excalidraw.development.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