Nerv --- React IE8 兼容方案
生活随笔
收集整理的這篇文章主要介紹了
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