我使用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")));