Как сделать так, чтобы скрипт набирал как text / babel, так и модуль? - PullRequest
Новая
       1

Как сделать так, чтобы скрипт набирал как text / babel, так и модуль?

0 голосов
/ 03 января 2019

Он отлично работает, потому что я не включил JSX, но когда я заменяю тип сценария на text/babel, он не работает, потому что модуль не загружается. browser.js Вавилонский компилятор.

Здесь ... JSX работает только тогда, когда я заменяю тип сценария на text/babel, но проблема в том, что модуль не загружается, поскольку сценарий не является модулем. Есть идеи, как заставить его работать с 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>

Ответы [ 2 ]

0 голосов
/ 26 мая 2019

Я думаю, что вопрос был в том, возможно ли использовать тег script с двумя или более типами одновременно (например, что-то вроде type="module, txt/babel"). Насколько я знаю, ответ НЕТ.

Ответ JonDotsoy помогает снова и снова сокращать ввод React.createElement, но даже при таком «быстром сокращении» это не так удобно, как JSX, при использовании больших шаблонов с вложенными элементами, потому что h('div', {}, 'hello!!')... трудно поддерживать в таких случаях.

Единственный способ объединить поддержку встроенного модуля браузера и встроенного браузера Babel для JSX без использования какого-либо инструмента для сборки - это ... довольно грязный хак, использующий eval и не должен использоваться для рабочих приложений:

index.html 

<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>

Приложение / app.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")
);

Приложение / ComponentOne.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;

Приложение / ComponentTwo.js 

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;
0 голосов
/ 26 марта 2019

вы можете предпочесть использовать псевдоним createElement. Этот способ быстрее для двигателя. Например, используйте h или e. 

const { createElement: h } = React;

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

В противном случае возможно использование модуля @babel/standalone, подробнее см. Здесь https://babeljs.io/docs/en/next/babel-standalone.html.

<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>
...