intro
tnpm i umd-package-loader --save
import Loader from 'umd-package-loader';
const LazyLoadComponent = (): JSX.Element => {
const [com, setCom] = React.useState(null)
React.useEffect(() => {
new Loader({
url: 'https://xxx.js',
name: 'xxx', // library name e.g. xxxCom
}).loadScript().then(component => {
const node = component.default;
setCom(React.createElement(node))
}).catch(err => {
// dosomething
})
}, []);
return com
}
support requirejs,When the page has requirejs, it will be loaded in the way of require
.if not, will use document.createElement('script')
load script.
be careful, must follow commonjs
or amd
standard, forever, umd
better. e.g. webpack config
module.exports = {
devtool: 'source-map',
entry: {
reactDemo: resolve(__dirname, '../appGrounds/react/index.tsx')
},
output: {
library: "xxxCom", // moduleName, the loader prop
libraryTarget: 'umd', // must
filename: '[name].js',
path: resolve(__dirname, '../entry/lib'),
}
}
版本协议
MIT