zoukankan      html  css  js  c++  java
  • 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开始进行webpackbabel配置,你可以使用Athena2来进行开发

    Athena2是一款基于webpack的前端工程化开发工具,它可以快速初始化一个新项目,内置项目所需的配置,对于普通需求基本可以零配置开发使用,当然你也可以自由地提供自己所需要的webpack配置。

    相关使用请查看Athena2的使用文档

  • 相关阅读:
    printcap
    browser-ua
    PHP 开发 APP 接口 学习笔记与总结
    Java实现 LeetCode 72 编辑距离
    Java实现 LeetCode 72 编辑距离
    Java实现 LeetCode 72 编辑距离
    Java实现 LeetCode 71 简化路径
    Java实现 LeetCode 71 简化路径
    Java实现 LeetCode 71 简化路径
    Java实现 LeetCode70 爬楼梯
  • 原文地址:https://www.cnblogs.com/crazycode2/p/8358314.html
Copyright © 2011-2022 走看看