Я пытался использовать SystemJS для загрузки React, но он не загружался, вместо этого выдавал сообщение об ошибке в «Консоль»> «React не определен». что-нибудь?
Вот что я пробовал
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React 18 with SystemJS</title>
<script src="dependencies/systemjs-6.12.1.min.js"></script>
<script type="systemjs-importmap"> {
"imports": {
"react": "/react.production-18.min.js"
, "reactDOM": "/react-dom.production-18.min.js"
} }
</script>
</head><body>
<div id="root">
<script type="systemjs-module">
System.import('react');
System.import('reactDOM');
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
} }
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));
</script>
</div></body></html>
Edit1: я использую SystemJS версии 6.12.1.
Решение проблемы
Вам нужно немного больше настроек, чтобы заставить его работать. Также рекомендуется хранить reactкод в отдельных файлах.
Полный рабочий пример здесь.
Конфигурация SystemJS для реакции:
System.config({
baseURL: '//npm.jspm.io/',
// CDN resolves
paths: {
'npm:*': '//npm.jspm.io/*',
'unpkg:*': '//unpkg.com/*',
'jsdelivr:*': '//cdn.jsdelivr.net/g/*',
'jsdelivr-npm:*': '//cdn.jsdelivr.net/npm/*'
},
meta: {
'*.scss': { loader: "sass" }
},
map: {
// The Application path
'index': INDEX + '?' + Date.now(),
// SystemJS plugins
'plugin-babel': 'unpkg:systemjs-plugin-babel@0/plugin-babel.js',
'systemjs-babel-build': 'unpkg:systemjs-plugin-babel@0/systemjs-babel-browser.js',
// 'scss': 'npm:scss',
// Application modules
'react': 'jsdelivr:react@15/react.js',
'react-dom': 'jsdelivr:react@15/react-dom.js'
},
packages: {
'https://npm.jspm.io/': { defaultExtension: 'js' },
'https://cdn.rawgit.com/*': { defaultExtension: false },
'https://unpkg.com/': { defaultExtension: false },
'./index.scss': { defaultExtension: false },
},
transpiler: 'plugin-babel',
babelOptions: {
sourceMaps: false,
stage0: true,
react: true
}
});
Комментариев нет:
Отправить комментарий