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>;
}
}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"
]
}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 es5-polyfill@0.0.6 as polyfill.min.js, but some other polyfills might work if implemented core ES5 APIs.
ReactJS does not support IE8.
So we tackle it down by internally using NervJS.
webpack.config.js
module.exports = {
resolve: {
alias: {
'react': 'nervjs',
'react-dom': 'nervjs',
},
},
};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"
}
}]
]
}$ git clone https://github.com/saltyshiomix/nerv-ie8-boilerplate
$ cd nerv-ie8-boilerplate
$ yarn
$ yarn build
# open with your default browser
$ yarn startFinally, open index.html on your Internet Explorer 8 or modern browsers.