From 2be1c8d0e5cf857e5cdb20210c386a0f84cc6027 Mon Sep 17 00:00:00 2001 From: Jason Karns Date: Thu, 7 May 2020 13:39:07 -0400 Subject: [PATCH 1/3] Prettier rollup.config.js --- packages/optimizely-sdk/rollup.config.js | 41 +++++++++--------------- 1 file changed, 16 insertions(+), 25 deletions(-) diff --git a/packages/optimizely-sdk/rollup.config.js b/packages/optimizely-sdk/rollup.config.js index 93851f949..d8bdf4d46 100644 --- a/packages/optimizely-sdk/rollup.config.js +++ b/packages/optimizely-sdk/rollup.config.js @@ -15,7 +15,7 @@ */ import { dependencies } from './package.json'; import commonjs from '@rollup/plugin-commonjs'; -import { terser } from 'rollup-plugin-terser'; +import { terser } from 'rollup-plugin-terser'; import resolve from '@rollup/plugin-node-resolve'; const BUILD_ALL = process.env.BUILD_ALL ? true : false; @@ -23,32 +23,29 @@ const BUILD_UMD_BUNDLE = process.env.BUILD_UMD_BUNDLE ? true : false; const getCjsConfigForPlatform = (platform) => { return { - plugins: [ - resolve(), - commonjs(), - ], + plugins: [resolve(), commonjs()], external: ['https', 'http', 'url'].concat(Object.keys(dependencies || {})), input: `lib/index.${platform}.js`, output: { exports: 'named', format: 'cjs', file: `dist/optimizely.${platform}.min.js`, - plugins: [ terser() ], + plugins: [terser()], sourcemap: true, - } + }, }; }; const esModuleConfig = { - ... getCjsConfigForPlatform('browser'), + ...getCjsConfigForPlatform('browser'), output: { exports: 'named', format: 'es', file: 'dist/optimizely.browser.es.min.js', - plugins: [ terser() ], + plugins: [terser()], sourcemap: true, - } -} + }, +}; const umdconfig = { plugins: [ @@ -62,13 +59,10 @@ const umdconfig = { 'LogLevel', 'setLogHandler', 'setErrorHandler', - 'getErrorHandler' + 'getErrorHandler', ], - '@optimizely/js-sdk-event-processor': [ - 'LogTierV1EventProcessor', - 'LocalStoragePendingEventsDispatcher' - ] - } + '@optimizely/js-sdk-event-processor': ['LogTierV1EventProcessor', 'LocalStoragePendingEventsDispatcher'], + }, }), ], input: 'lib/index.browser.js', @@ -84,7 +78,7 @@ const umdconfig = { format: 'umd', file: 'dist/optimizely.browser.umd.min.js', exports: 'named', - plugins: [ terser() ], + plugins: [terser()], sourcemap: true, }, ], @@ -92,19 +86,16 @@ const umdconfig = { // A separate bundle for json schema validator. const jsonSchemaValidatorConfig = { - plugins: [ - resolve(), - commonjs(), - ], + plugins: [resolve(), commonjs()], external: ['json-schema', '@optimizely/js-sdk-utils'], input: 'lib/utils/json_schema_validator/index.js', output: { exports: 'named', format: 'cjs', file: 'dist/optimizely.json_schema_validator.min.js', - plugins: [ terser() ], + plugins: [terser()], sourcemap: true, - } + }, }; export default [ @@ -114,4 +105,4 @@ export default [ BUILD_ALL && esModuleConfig, BUILD_ALL && jsonSchemaValidatorConfig, (BUILD_ALL || BUILD_UMD_BUNDLE) && umdconfig, -].filter(config => config); +].filter((config) => config); From 878eb53b919eacadab5bcde9d3d2e8f48f0c17ac Mon Sep 17 00:00:00 2001 From: Jason Karns Date: Thu, 7 May 2020 14:08:59 -0400 Subject: [PATCH 2/3] Use rollup's --config- option for choosing bundles Rollup provides a feature specifically designed for passing in config options to the rollup configuration module. That is: --config-* options. (It is documented deeply under https://rollupjs.org/guide/en/#configuration-files ) I believe this is a superior mechanism for passing options to rollup's config because they do not impact process.env. Environment variables have a very specific capability, which is that they are inherited by child processes. These are settings that quite literally "configure the environment under which a process runs". However, their use prior to this commit was an abuse in order to simply pass an _option_ to the rollup configuration that would control which bundles to build. Rollup's --config* feature is superior for this role, because the option is only intended to go so far as the configuration module itself. Thus, using them to control which bundle(s) are built does not leak extraneous information into the *ahem* environment of the build process. As a side benefit, the cli invocation is cleaner! --- packages/optimizely-sdk/package.json | 6 +- packages/optimizely-sdk/rollup.config.js | 81 ++++++++++++++---------- 2 files changed, 52 insertions(+), 35 deletions(-) diff --git a/packages/optimizely-sdk/package.json b/packages/optimizely-sdk/package.json index f0751fea2..4d3c48259 100644 --- a/packages/optimizely-sdk/package.json +++ b/packages/optimizely-sdk/package.json @@ -8,11 +8,13 @@ "react-native": "dist/optimizely.react_native.min.js", "typings": "lib/index.d.ts", "scripts": { + "clean": "rm -rf dist", "test": "mocha ./lib/*.tests.js ./lib/**/*.tests.js ./lib/**/**/*tests.js --recursive --exit --require esm --require lib/tests/exit_on_unhandled_rejection.js", "test-xbrowser": "karma start karma.bs.conf.js --single-run", "test-umdbrowser": "npm run build-browser-umd && karma start karma.umd.conf.js --single-run", - "build-browser-umd": "rollup -c --environment BUILD_UMD_BUNDLE", - "build": "rm -rf dist && rollup -c --environment BUILD_ALL", + "prebuild": "npm run clean", + "build": "rollup -c", + "build-browser-umd": "rollup -c --config-umd", "test-ci": "npm run test-xbrowser && npm run test-umdbrowser", "lint": "eslint 'lib/**/*.js'", "cover": "istanbul cover _mocha ./lib/*.tests.js ./lib/**/*.tests.js ./lib/**/**/*tests.js", diff --git a/packages/optimizely-sdk/rollup.config.js b/packages/optimizely-sdk/rollup.config.js index d8bdf4d46..52b157a85 100644 --- a/packages/optimizely-sdk/rollup.config.js +++ b/packages/optimizely-sdk/rollup.config.js @@ -13,41 +13,38 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { dependencies } from './package.json'; + import commonjs from '@rollup/plugin-commonjs'; import { terser } from 'rollup-plugin-terser'; import resolve from '@rollup/plugin-node-resolve'; +import { dependencies } from './package.json'; -const BUILD_ALL = process.env.BUILD_ALL ? true : false; -const BUILD_UMD_BUNDLE = process.env.BUILD_UMD_BUNDLE ? true : false; - -const getCjsConfigForPlatform = (platform) => { - return { - plugins: [resolve(), commonjs()], - external: ['https', 'http', 'url'].concat(Object.keys(dependencies || {})), - input: `lib/index.${platform}.js`, - output: { - exports: 'named', - format: 'cjs', - file: `dist/optimizely.${platform}.min.js`, - plugins: [terser()], - sourcemap: true, - }, - }; -}; - -const esModuleConfig = { - ...getCjsConfigForPlatform('browser'), +const cjsBundleFor = (platform) => ({ + plugins: [resolve(), commonjs()], + external: ['https', 'http', 'url'].concat(Object.keys(dependencies || {})), + input: `lib/index.${platform}.js`, output: { exports: 'named', - format: 'es', - file: 'dist/optimizely.browser.es.min.js', + format: 'cjs', + file: `dist/optimizely.${platform}.min.js`, plugins: [terser()], sourcemap: true, }, +}); + +const esmBundle = { + ...cjsBundleFor('browser'), + output: [ + { + format: 'es', + file: 'dist/optimizely.browser.es.min.js', + plugins: [terser()], + sourcemap: true, + }, + ], }; -const umdconfig = { +const umdBundle = { plugins: [ resolve({ browser: true }), commonjs({ @@ -85,7 +82,7 @@ const umdconfig = { }; // A separate bundle for json schema validator. -const jsonSchemaValidatorConfig = { +const jsonSchemaBundle = { plugins: [resolve(), commonjs()], external: ['json-schema', '@optimizely/js-sdk-utils'], input: 'lib/utils/json_schema_validator/index.js', @@ -98,11 +95,29 @@ const jsonSchemaValidatorConfig = { }, }; -export default [ - BUILD_ALL && getCjsConfigForPlatform('node'), - BUILD_ALL && getCjsConfigForPlatform('browser'), - BUILD_ALL && getCjsConfigForPlatform('react_native'), - BUILD_ALL && esModuleConfig, - BUILD_ALL && jsonSchemaValidatorConfig, - (BUILD_ALL || BUILD_UMD_BUNDLE) && umdconfig, -].filter((config) => config); +const bundles = { + 'cjs-node': cjsBundleFor('node'), + 'cjs-browser': cjsBundleFor('browser'), + 'cjs-react-native': cjsBundleFor('react_native'), + esm: esmBundle, + 'json-schema': jsonSchemaBundle, + umd: umdBundle, +}; + +// Collect all --config-* options and return the matching bundle configs +// Builds all bundles if no --config-* option given +// --config-cjs will build all three cjs-* bundles +// --config-umd will build only the umd bundle +// --config-umd --config-json will build both umd and the json-schema bundles +export default (args) => { + const patterns = Object.keys(args) + .filter((arg) => arg.startsWith('config-')) + .map((arg) => arg.replace(/config-/, '')); + + // default to matching all bundles + if (!patterns.length) patterns.push(/.*/); + + return Object.entries(bundles) + .filter(([name, config]) => patterns.some((pattern) => name.match(pattern))) + .map(([name, config]) => config); +}; From 3b8443df02fdabc77539e74366070684cc1c65b0 Mon Sep 17 00:00:00 2001 From: Jason Karns Date: Thu, 7 May 2020 14:16:55 -0400 Subject: [PATCH 3/3] Generate a non-minified ESM bundle ESM consumers are very likely using their own bundler (rollup, webpack) and would probably prefer to consume non minified ESM entrypoint so they can minifiy it themselves with their preferred minification tools. --- packages/optimizely-sdk/rollup.config.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/optimizely-sdk/rollup.config.js b/packages/optimizely-sdk/rollup.config.js index 52b157a85..129bdbc51 100644 --- a/packages/optimizely-sdk/rollup.config.js +++ b/packages/optimizely-sdk/rollup.config.js @@ -35,6 +35,11 @@ const cjsBundleFor = (platform) => ({ const esmBundle = { ...cjsBundleFor('browser'), output: [ + { + format: 'es', + file: 'dist/optimizely.browser.es.js', + sourcemap: true, + }, { format: 'es', file: 'dist/optimizely.browser.es.min.js',