Nerv --- React IE8 兼容方案

時間 2019-11-20

標籤 nerv react ie8 兼容方案欄目 React 简体版

原文原文鏈接

建立項目

建立一個目錄，使用npm快速初始化javascript

$ mkdir my-project && npm init -y

安裝依賴

安裝webpack以及babelhtml

$ 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.jsjava

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的配置文件.babelrcreact

{
  "presets": [
    [
      "@babel/env",
      {
        "spec": true,
        "useBuiltIns": false
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "Nerv.createElement"
      }
    ]
  ]
}

添加項目入口文件

在項目根目錄下添加一個入口html文件index.htmlwebpack

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Nerv App</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

書寫代碼

而後就能夠書寫代碼了，新建一個src目錄，添加一個Hello.js文件git

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.jsgithub

import Nerv from 'nervjs'
import Hello from './Hello'

Nerv.render(<Hello />, document.getElementById('app'))

最後在package.json文件的scripts字段中增長web

"scripts": {
  "dev": "webpack-dev-server --config webpack.config.js"
},

在項目根目錄下執行npm run dev，就能在瀏覽器中看到效果了！npm

注意：使用的時候須要配合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的使用文檔