nerv-ie8-boilerplate
v0.9.0
Published
A minimalistic boilerplate of NervJS with IE8+ and React 16 compatibility <3
Downloads
3
Readme
NervJS IE8+ Boilerplate
- Minimal Configuration
- Work on IE8+ and other modern browsers
- Identical API with React 16
Anyone can imagine that the code below does work on IE8?
index.html
<body>
<div id="app"></div>
<script src="dist/index.js"></script>
</body>src/index.js (webpack entry point)
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(
<App name="NervJS" />,
document.getElementById('app')
)src/App.jsx
import React from 'react'
export default class App extends React.Component {
render() {
return <div>Hello {this.props.name}!</div>
}
}Demo
How it works
Transpile to ES3
Transpile ES5 (or above) codes to ES3 ones, so legacy browsers like IE8 can handle them.
npm
# need to transpile to ES3
$ yarn add --dev @babel/core @babel/preset-env @babel/plugin-transform-property-literals @babel/plugin-transform-member-expression-literals
# need to handle React
$ yarn add --dev @babel/preset-react.babelrc
{
"presets": [
["@babel/env", {
"spec": true,
"useBuiltIns": false
}],
"@babel/react"
],
"plugins": [
"@babel/transform-member-expression-literals",
"@babel/transform-property-literals"
]
}Polyfill for Internet Explorer 8 (or below)
But on IE8, we need some polyfills like Object.defineProperty().
index.html
<head>
<!--[if lte IE 8]>
<script src="polyfill.min.js"></script>
<![endif]-->
</head>This repo uses [email protected] as polyfill.min.js, but some other polyfills might work if implemented core ES5 APIs.
Handle ReactJS as ALIAS
ReactJS does not support IE8.
So we tackle it down by internally using NervJS.
Webpack Alias
webpack.config.js
module.exports = {
resolve: {
alias: {
'react': 'nervjs',
'react-dom': 'nervjs'
}
}
}Babel Alias
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
use: 'babel-loader'
}
]
}
}.babelrc
Resolve with babel-plugin-module-resolver.
{
"plugins": [
["module-resolver", {
"root": ["."],
"alias": {
"react": "nervjs",
"react-dom": "nervjs"
}
}]
]
}How to use
$ git clone https://github.com/saltyshiomix/nerv-ie8-boilerplate
$ cd nerv-ie8-boilerplate
$ yarn
$ yarn buildFinally, open index.html on your Internet Explorer 8 or modern browsers.