From 3d047d57a77f1154e0d3ed386ea48b4b61b9f663 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Sun, 28 Mar 2021 13:48:26 +0530 Subject: [PATCH] =?UTF-8?q?build:=20Add=20separate=20dev=20and=20prod=20bu?= =?UTF-8?q?ilds=20and=20add=20source-maps=20to=20dev=20build=20?= =?UTF-8?q?=F0=9F=8E=89=20=20(#3330)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * build: Add separate dev and prod builds and add sourcemaps to dev build * update * add * update changelog --- src/packages/excalidraw/CHANGELOG.md | 8 ++ src/packages/excalidraw/main.js | 5 ++ src/packages/excalidraw/package.json | 4 +- src/packages/excalidraw/webpack.dev.config.js | 81 +++++++++++++++++++ .../excalidraw/webpack.prod.config.js | 10 ++- src/packages/tsconfig.dev.json | 11 +++ 6 files changed, 115 insertions(+), 4 deletions(-) create mode 100644 src/packages/excalidraw/main.js create mode 100644 src/packages/excalidraw/webpack.dev.config.js create mode 100644 src/packages/tsconfig.dev.json diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md index 072ed8ec..a3b1f87a 100644 --- a/src/packages/excalidraw/CHANGELOG.md +++ b/src/packages/excalidraw/CHANGELOG.md @@ -23,6 +23,14 @@ Please add the latest change on the top under the correct section. Use `location.hash` when importing libraries to fix installation issues. This will require host apps to add a `hashchange` listener and call the newly exposed `excalidrawAPI.importLibrary(url)` API when applicable [#3320](https://github.com/excalidraw/excalidraw/pull/3320). - Append `location.pathname` to `libraryReturnUrl` default url [#3325](https://github.com/excalidraw/excalidraw/pull/3325). +### Build + +- Expose separate builds for dev and prod and support source maps in dev build [#3330](https://github.com/excalidraw/excalidraw/pull/3330). + #### BREAKING CHANGE + - If you are using script tag to embed excalidraw then the name of the file will have to be updated to `excalidraw.production.min.js` instead of `excalidraw.min.js`. If you want to use dev build you can use `excalidraw.development.js` + +--- + ## 0.5.0 (2021-03-21) ## Excalidraw API diff --git a/src/packages/excalidraw/main.js b/src/packages/excalidraw/main.js new file mode 100644 index 00000000..b1668faf --- /dev/null +++ b/src/packages/excalidraw/main.js @@ -0,0 +1,5 @@ +if (process.env.NODE_ENV === "production") { + module.exports = require("./dist/excalidraw.production.min.js"); +} else { + module.exports = require("./dist/excalidraw.development.js"); +} diff --git a/src/packages/excalidraw/package.json b/src/packages/excalidraw/package.json index 4929f354..20b88b83 100644 --- a/src/packages/excalidraw/package.json +++ b/src/packages/excalidraw/package.json @@ -1,7 +1,7 @@ { "name": "@excalidraw/excalidraw", "version": "0.5.0", - "main": "dist/excalidraw.min.js", + "main": "main.js", "files": [ "dist/*" ], @@ -66,7 +66,7 @@ "repository": "https://github.com/excalidraw/excalidraw", "homepage": "https://github.com/excalidraw/excalidraw/tree/master/src/packages/excalidraw", "scripts": { - "build:umd": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js", + "build:umd": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js && cross-env NODE_ENV=development webpack --config webpack.dev.config.js", "build:umd:withAnalyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack.prod.config.js", "pack": "yarn build:umd && yarn pack" } diff --git a/src/packages/excalidraw/webpack.dev.config.js b/src/packages/excalidraw/webpack.dev.config.js new file mode 100644 index 00000000..70eec511 --- /dev/null +++ b/src/packages/excalidraw/webpack.dev.config.js @@ -0,0 +1,81 @@ +const path = require("path"); +const webpack = require("webpack"); + +module.exports = { + mode: "development", + devtool: false, + entry: { + "excalidraw.development": "./entry.js", + }, + output: { + path: path.resolve(__dirname, "dist"), + library: "Excalidraw", + libraryTarget: "umd", + filename: "[name].js", + chunkFilename: "excalidraw-assets-dev/[name]-[contenthash].js", + publicPath: "", + }, + resolve: { + extensions: [".js", ".ts", ".tsx", ".css", ".scss"], + }, + module: { + rules: [ + { + test: /\.(sa|sc|c)ss$/, + exclude: /node_modules/, + use: ["style-loader", { loader: "css-loader" }, "sass-loader"], + }, + { + test: /\.(ts|tsx|js|jsx|mjs)$/, + exclude: /node_modules/, + use: [ + { + loader: "ts-loader", + options: { + transpileOnly: true, + configFile: path.resolve(__dirname, "../tsconfig.dev.json"), + }, + }, + ], + }, + { + test: /\.(woff|woff2|eot|ttf|otf)$/, + use: [ + { + loader: "file-loader", + options: { + name: "[name].[ext]", + outputPath: "excalidraw-assets-dev", + }, + }, + ], + }, + ], + }, + optimization: { + splitChunks: { + chunks: "async", + cacheGroups: { + vendors: { + test: /[\\/]node_modules[\\/]/, + name: "vendor", + }, + }, + }, + }, + plugins: [new webpack.EvalSourceMapDevToolPlugin({ exclude: /vendor/ })], + externals: { + react: { + root: "React", + commonjs2: "react", + commonjs: "react", + amd: "react", + }, + "react-dom": { + root: "ReactDOM", + commonjs2: "react-dom", + commonjs: "react-dom", + amd: "react-dom", + }, + }, +}; diff --git a/src/packages/excalidraw/webpack.prod.config.js b/src/packages/excalidraw/webpack.prod.config.js index b1e808cc..fa3eaefb 100644 --- a/src/packages/excalidraw/webpack.prod.config.js +++ b/src/packages/excalidraw/webpack.prod.config.js @@ -6,7 +6,7 @@ const BundleAnalyzerPlugin = require("webpack-bundle-analyzer") module.exports = { mode: "production", entry: { - "excalidraw.min": "./entry.js", + "excalidraw.production.min": "./entry.js", }, output: { path: path.resolve(__dirname, "dist"), @@ -24,7 +24,13 @@ module.exports = { { test: /\.(sa|sc|c)ss$/, exclude: /node_modules/, - use: ["style-loader", { loader: "css-loader" }, "sass-loader"], + use: [ + "style-loader", + { + loader: "css-loader", + }, + "sass-loader", + ], }, { test: /\.(ts|tsx|js|jsx|mjs)$/, diff --git a/src/packages/tsconfig.dev.json b/src/packages/tsconfig.dev.json new file mode 100644 index 00000000..6462aaba --- /dev/null +++ b/src/packages/tsconfig.dev.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "target": "es6", + "module": "esNext", + "moduleResolution": "node", + "resolveJsonModule": true, + "jsx": "react-jsx", + "sourceMap": true, + "allowJs": true + } +}