當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Nerv --- React IE8 兼容方案

發布時間：2025/3/17 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 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的使用文檔

轉載于:https://www.cnblogs.com/crazycode2/p/8358314.html

總結

以上是生活随笔為你收集整理的Nerv --- React IE8 兼容方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Sanic 连接postgresql数据
下一篇：知识库的构建 6-1 语义网 Seman