15
votes

Comment faire en sorte que le script tape à la fois texte / babel et module?

Cela fonctionne parfaitement parce que je n'ai pas inclus JSX, mais lorsque je remplace le type de script par text/babel , cela ne fonctionne pas car le module ne se charge pas. browser.js le compilateur Babel.

Ici ... JSX ne fonctionne que lorsque je remplace le type de script par text/babel mais le problème est que le module ne se charge pas car le script n'est pas un module. Une idée de comment le faire fonctionner avec JSX?

<div id="root">

</div>
<script type="module">
    import  './react.min.js';
    import  './react-dom.min.js';
    import  './browser.js';
    class Hello extends React.Component {
        render() {
            return React.createElement('div', null, `Hello ${this.props.toWhat}`);
        }
    }
    ReactDOM.render(
        React.createElement(Hello, {toWhat: 'World'}, null),
        document.getElementById('root')
    );
</script>

javascript reactjs babeljs

1 commentaires

J'ai la même question. Qu'as-tu finalement fait?

4 Réponses :

0
votes

vous préférerez peut-être utiliser un alias pour createElement . Cette façon est plus rapide pour le moteur. Par exemple, utilisez h ou e .

<div id="app"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const { render } = ReactDOM;

const App = () => {
    return <div>hello!!</div>
}

render(<App />, document.getElementById('app'));
</script>

Sinon, il est possible d'utiliser le module @babel/standalone , veuillez en savoir plus ici https://babeljs.io/docs/en/next/babel-standalone.html .

const { createElement: h } = React;

const App = () => {
   return h('div', {}, 'hello!!'); 
}

0 commentaires

2
votes

Je pense que la question était de savoir s'il est possible d'utiliser une balise de script avec deux types ou plus en même temps (par exemple quelque chose comme type="module, txt/babel" ). Autant que je sache, la réponse est NON.

La réponse de JonDotsoy aide à réduire la saisie de React.createElement encore et encore, mais même avec un tel "raccourci variable", ce n'est pas aussi confortable que JSX lors de l'utilisation de modèles plus grands avec des éléments imbriqués parce que h('div', {}, 'hello!!')... est difficile à maintenir dans de tels cas.

La seule façon que j'ai trouvée de combiner la prise en charge du module de navigateur natif et Babel dans le navigateur pour JSX sans utiliser d'outil de construction est la suivante ... un hack plutôt sale qui utilise eval et ne devrait pas être utilisé pour les applications de production:

index.html

let template = `
<div>
    <h2>This is ComponentTwo</h2>
    <p key="2">Property "msg" content: {props.msg}</p>
</div>
`;


const ComponentTwo = (props) => {
    return(
        eval(Babel.transform(template, { presets: ['es2017', 'react'] }).code)
    );
};

export default ComponentTwo;

app / app.js

import ComponentTwo from "./ComponentTwo.js";


let template = `
<div>
    <h2>This is ComponentOne</h2>
    <p key="2">Property "msg" content: {props.msg}</p>

    <ComponentTwo msg="MsgText-ComponentTwo" />
</div>
`;


const ComponentOne = (props) => {
    return(
        eval(Babel.transform(template, { presets: ['es2017', 'react'] }).code)
    );
};

export default ComponentOne;

app / ComponentOne.js

import ComponentOne from "./ComponentOne.js";


let template = `
<div>
    <h1>Heading</h1>
    <hr />
    <ComponentOne msg="MsgText-ComponentOne" />
</div>
`;


const App = () => {
    return (
        eval(Babel.transform(template, { presets: ['es2017', 'react'] }).code)
    );
};


ReactDOM.render(
    React.createElement(App, null),
    document.getElementById("app")
);

app / ComponentTwo.js

<body>

    <div id="app"></div>


    <!-- Scripts ------- -->
    <script src="vendor/js/babel.min.js"></script>
    <script src="vendor/js/react.development.js"></script>
    <script src="vendor/js/react-dom.development.js"></script>
    <script src="app/app.js" type="module"></script>

</body>

0 commentaires

4
votes

Juste au cas où quelqu'un viendrait chercher une réponse

Il existe un support pour les plugins de données et les préréglages de données dans babel standalone

<script data-plugins="transform-es2015-modules-umd" type="text/babel">

voir plus ici Babel autonome

0 commentaires

0
votes

Comme mentionné dans la documentation , il est ajouté dans: v7.10.0 .

Si vous souhaitez utiliser le support natif de votre navigateur pour les modules ES, vous devez normalement définir un attribut type="module" sur votre balise de script.
Avec @ babel / standalone, définissez plutôt un attribut data-type="module" , comme ceci:
<script type="text/babel" data-type="module">

0 commentaires