Pagetitle

bla

'); //alternative define('hello.html', [], document.createElement('div')); //define r.js style define('react', reactFactoryFn); //using version number define('react@17.0.2', react1702FactoryFn); ``` ## RequireEs options ```js require.config({ allowRedefine: false, invokeNonMatchedDefines: true }); ``` Key | Description --- | --- allowRedefine | default: false;
false: you cannot change the factory, for a given package (after it gets required for the first time)
true: the factory can be changed at any time, next require will use the new factory invokeNonMatchedDefines | default: false;
automatically invoke anonymous defines which could not be matched to any package in the RequireEs register. ## RequireEs events ### Usage ```js //subscribe to an event require.on(evtName, callback); //require.subscribe is a synonym for require.on require.subscribe(evtName, callback); //publish an event require.publish(evtName, payload); //spy on all events require.addWireTap(callback); ``` ### Predefined events Event | Trigger --- | --- requirees.pre-define | when define gets called, but the factory is not stored into the registry yet requirees.define | when a package factory was added to the registry requirees.pre-register | when require.register or require.config({paths}) are called, but the package it not added to the registry yet requirees.register | when a package was added to the registry requirees.pre-file-load | before an actual file/factory load is happening requirees.file-load | when a file/factory load has completed requirees.wiretaps | on all events requirees.scripttag.preadd | triggers before requirees appends a script-tag to the dom requirees.scripttag.added | tiggers after requirees appended a script-tag to the dom requirees.styletag.preadd | triggers before requirees appends a script-tag to the dom requirees.styletag.added | tiggers after requirees appended a style-tag to the dom ### Samples ```js //listen to all files being loaded requirees.subscribe('requirees.pre-file-load', ({package}) => { console.log(`start loading package: ${package.name}`); }) //listen to all events being triggered requirees.addWireTap(console.log); //alternative: requirees.subscribe('requirees.wiretaps', console.log); //create custom events requirees.subscribe('hendrik.sayHello', data => { console.log('hello!!', data) }); requirees.publish('hendrik.sayHello', {foo: 'bar'}); ``` ## WebPack / Rollup bundling for RequireEs ### Intro In the examples below project-dependencies 'jquery', 'react' and 'lodash' will be removed from your bundle and loaded using RequireEs. To make this happen: * Add RequireEs to the top of your HTML-document * Register your dependencies on the document (This will happen automatically using RequireEs-server, coming soon) * Load your AMD (/UMD) bundle through RequireEs (recommended), or using a script-tag Samples for Webpack and Rollup bundling can be found in the sections below. ```js //require the AMD module require.register({ jquery: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js', react: [ 'https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/react/16.10.1/umd/react.production.min.js' ], lodash: [ 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js' ] }); //require the application package await require('/scripts/myLib.amd.js'); ``` If your package is added through a script-tag, call require.config({invokeNonMatchedDefines: true}) to invoke the factory immediately: ```html ``` ### Build your bundle AMD style #### Webpack ```js module.exports = { //... output: { libraryTarget: 'amd', filename: 'scripts/myLib.amd.js' }, //... externals: { jquery: 'jquery@*', react: 'react@^17.0.0', lodash: 'lodash@^4.17.0' }, }; ``` #### Rollup ```js export default { //... output: { format: 'amd', file: 'scripts/myLib.amd.js', external: ['react', 'jquery', 'lodash'], paths: { react: 'react@^17.0.0', jquery: 'jquery@*', lodash: 'lodash@^4.17.0' } }, //... }; ``` ### Build your bundle UMD style #### Webpack ```js module.exports = { //... output: { libraryTarget: 'umd', filename: 'scripts/myLib.amd.js', library: 'myLib' }, //... externals: { jquery: { root: '$', amd: 'jquery@*', commonjs: 'jquery', commonjs2: 'jquery' }, react: { root: 'React', amd: 'react@^17.0.0', commonjs: 'react', commonjs2: 'react' }, lodash: { root: '_', amd: 'lodash@^4.17.0', commonjs: 'lodash', commonjs2: 'lodash' } }, }; ``` #### Rollup ```js export default { //... output: { format: 'umd', file: 'scripts/myLib.amd.js', name: 'myLib', external: ['react', 'jquery', 'lodash'], paths: { react: 'react@^17.0.0', jquery: 'jquery@*', lodash: 'lodash@^4.17.0' }, globals: { react: 'React', jquery: '$', lodash: '_' } }, //... }; ``` ## Custom elements support (coming soon)