Webpack plugin that simply outputs HTML files using JSX
This is used by markup engineers for HTML delivery
There are still companies that are doing this kind of development, and I hope you can get in touch with JSX as much as possible.
I hope we can have a world where we don't need such a library.
Please install react environment and @babel/register
to use
npm i -D jsx-simple-html-render
webpack.config.js
const JsxSimpleHtmlRender = require('jsx-simple-html-render')
// ...
plugins: [
new JsxSimpleHtmlRender({
throwFlag: false, // true if you want to throw with react error
watch: true, // Hot reload
src: 'src/jsx',// JSX source dir
relativeRoot: 'dist', // Relative path origin
output: 'dist', // HTML output dir
replace: [ // HTML string replacement
{
regexp: /<!-- replace -->/,
value: 'hello'
}
]
})
]
- Use
.jsx
extension to output HTML -
.js
is not output as HTML - Use
export default
in.jsx
import React from 'react'
export default ({ relativePath }) => { // You can get relative paths in .jsx
return (
<html>
<body>
<a href="template/ExampleHTML.html">ExampleHTML</a>
{'<!-- comment out -->'} {/* HTML comment out output */}
<script src={`${relativePath}js/example.js`} />
</body>
</html>
)
}
Some attributes cannot be output as pure HTML because react is used Replacement list that jsx-simple-html-render puts by default
[
{ regexp: /</g, value: '<' },
{ regexp: />/g, value: '>' },
{ regexp: /&/g, value: '&' },
{ regexp: /charSet=/g, value: 'charset=' },
{ regexp: /frameBorder=/g, value: 'frameborder=' },
{ regexp: /htmlonclick/g, value: 'onclick' },
{ regexp: /hrefLang/g, value: 'hreflang' },
{ regexp: /colSpan/g, value: 'colspan' },
{ regexp: /'/g, value: "'" },
{ regexp: /htmlchecked/g, value: 'checked' },
{ regexp: /async=""/g, value: 'async' }
]