Nerv --- React IE8 兼容方案
Posted 每天都要进步一点点
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Nerv --- React IE8 兼容方案相关的知识，希望对你有一定的参考价值。
创建项目
创建一个目录，使用npm快速初始化
$ mkdir my-project && npm init -y
安装依赖
安装webpack以及babel
$ npm install --save-dev webpack webpack-dev-server html-webpack-plugin babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env @babel/plugin-transform-react-jsx
安装Nerv
$ npm install --save nervjs
添加配置文件
在项目根目录下添加一个简单的webpack配置文件webpack.config.js
const path = require(\'path\')
const HtmlWebpackPlugin = require(\'html-webpack-plugin\')
module.exports = {
entry: \'./src/index.js\',
output: {
path: path.resolve(__dirname, \'dist\'),
filename: \'bundle.js\'
},
module: {
rules: [
{ test: /\\.js$/, use: \'babel-loader\' }
]
},
plugins: [
new HtmlWebpackPlugin({
filename: \'index.html\',
template: \'./index.html\'
})
]
}
在项目根目录下添加一个babel的配置文件.babelrc
{
"presets": [
[
"@babel/env",
{
"spec": true,
"useBuiltIns": false
}
]
],
"plugins": [
[
"@babel/plugin-transform-react-jsx",
{
"pragma": "Nerv.createElement"
}
]
]
}
添加项目入口文件
在项目根目录下添加一个入口html文件index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Nerv App</title> </head> <body> <div id="app"></div> </body> </html>
书写代码
然后就可以书写代码了，新建一个src目录，添加一个Hello.js文件
import Nerv from \'nervjs\'
// import { Component, createElement } from \'nervjs\'
class Hello extends Nerv.Component {
constructor () {
super(...arguments)
this.state = {
message: \'world\'
}
}
render () {
return (
<div>
Hello, {this.state.message}
</div>
)
}
}
export default Hello
随后在src目录下新建一个index.js文件来调用Hello.js
import Nerv from \'nervjs\' import Hello from \'./Hello\' Nerv.render(<Hello />, document.getElementById(\'app\'))
最后在package.json文件的scripts字段中增加
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js"
},
在项目根目录下执行npm run dev，就能在浏览器中看到效果了！
注意：使用的时候需要配合babel的@babel/plugin-transform-react-jsx插件来将JSX转换的创建虚拟DOM的代码替换成使用Nerv的API，使用方式如下
{
...
"plugins": [
["@babel/plugin-transform-react-jsx", {
"pragma": "Nerv.createElement" // 如果你 import { createElement } from \'nervjs\' 的话，那这里设置成 `createElement` 就行了
}]
]
}
当然，如果你想避免从0开始进行webpack与babel配置，你可以使用Athena2来进行开发
Athena2是一款基于webpack的前端工程化开发工具，它可以快速初始化一个新项目，内置项目所需的配置，对于普通需求基本可以零配置开发使用，当然你也可以自由地提供自己所需要的webpack配置。
相关使用请查看Athena2的使用文档
以上是关于Nerv --- React IE8 兼容方案的主要内容，如果未能解决你的问题，请参考以下文章