如何使用rollupjs配置preact SSR项目,以避免preact $ 1?

时间:2019-02-06 07:05:33

标签: reactjs jsx ssr rollupjs preact

我使用rollupjs预先打包一个SSR项目。我使用@ babel-plugin-transform-react-jsx来转换jsx。我在全局配置preact。但是在捆绑软件中,有一个preact $ 1而不是preact。似乎与实用选项:preact.h有冲突。我不希望preact $ 1出现。如何配置?

rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

const dirs = {
    src: './src/demo',
    dist: './dist'
}

export default [
    {
        external: ['preact', 'preact-render-to-string'],
        
        input: `${dirs.src}/server.js`,
        output: {
            file: `${dirs.dist}/server.js`,
            format: 'iife',
            globals: {
                'preact': 'require("preact")',
                'preact-render-to-string': 'require("preact-render-to-string")'
            }
        },
       
        plugins: [
            resolve({
                jsnext: true,
                main: true,
                browser: true
            }),
            
            
            babel({
                exclude: 'node_modules/**',
                presets: [
                    [
                        '@babel/preset-env', {
                            targets: {
                                node: 'current'
                            }
                        }
                    ]
                ],
                plugins: [
                    [
                        '@babel/transform-react-jsx', { 'pragma': 'preact.h'}
                    ]
                ]
            }),
            commonjs({
                include: 'node_modules/**'            
            })
            
        ]
    }
    
]

app.jsx

import {Component} from 'preact';
import Foo from './foo.jsx';
class App extends Component {
    render(props, state) {
        let {text} = state;
        return (
            <div>
                <Foo/>
                <div>{text}</div>
            </div>
        )
    }
}
export default App;

server.js

import {h} from 'preact';
import preactRenderToString from 'preact-render-to-string';
import App from './app.jsx';

let html = preactRenderToString(
    <App />
)

console.log(html);

bundlejs-> server.js

(function (preact$1, preactRenderToString) {
    'use strict';

    preactRenderToString = preactRenderToString && preactRenderToString.hasOwnProperty('default') ? preactRenderToString['default'] : preactRenderToString;

    class Foo extends preact$1.Component {
      render(props, state) {
        let {
          text
        } = state;
        return preact.h("span", null, text);
      }

    }

    class App extends preact$1.Component {
      render(props, state) {
        let {
          text
        } = state;
        return preact.h("div", null, preact.h(Foo, null), preact.h("div", null, text));
      }

    }

    let html = preactRenderToString(preact.h(App, null));
    console.log(html);

}(require("preact"), require("preact-render-to-string")));

0 个答案:

没有答案