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的使用文档