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的使用文档
Nerv --- React IE8 兼容方案的更多相关文章
- background-size IE8兼容方案
根据canius(http://caniuse.com/#search=background-size),background-size兼容性为IE9以及以上浏览器,如下图所示. 实例代码: < ...
- react 开发 PC 端项目(一)项目环境搭建 及 处理 IE8 兼容问题
步骤一:项目环境搭建 首先,你不应该使用 React v15 或更高版本.使用仍然支持 IE8 的 React v0.14 即可. 技术选型: 1.react@0.14 2.bootstrap3 3. ...
- 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案
第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...
- IE8兼容placeholder的方案
用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本 ...
- css3兼容IE8的方案 各个ie的hack
虽然现在很多项目已经对低版本IE不要求了,但是还有部分公司对IE8还是很执着的,咱作为屌丝前端程序员不能和老板说前端潮流,不能说趋势,只能动脑子了,下面就分享一些css3兼容ie8的方案思路.主要是实 ...
- border-radius IE8兼容处理
根据canisue(http://caniuse.com/#search=border-radius),border-radius兼容性如下图所示: 测试代码: <!DOCTYPE html&g ...
- box-shadow IE8兼容处理
根据canisue(http://caniuse.com/#search=box-shadow),box-shadow兼容性如下图所示: 测试代码: <!DOCTYPE html> < ...
- Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案
由于IE8不支持HTML5,而它又是Win7的默认浏览器,我们即使讨厌它,在这几年却也拿它没办法. 最近做了个需要兼容IE8的项目,不可避免地用了HTML5+CSS3,甚至canvas和svg,做兼容 ...
- localStorage兼容方案
localStorage是H5的存储方案,各大浏览器支持都相当不错,唯一悲催的就是IE,这个浏览器界的另类总是显得格格不入. IE “Internet选项”->“安全”中有一个“启动保护模式”的 ...
随机推荐
- python+selenium自动化登录dnf11周年活动界面领取奖励登录部分采坑总结[1]
背景: Dnf的周年庆活动之一,游戏在6月22日 06:00~6月23日 06:00之间登陆过游戏后可以于6月25日 16:00~7月04日 06:00领取奖励 目标:连续四天自动运行脚本,自动领取所 ...
- Java之字符,字符串替换
/** 4. 字符串的替换操作 1. String replace(char oldChar,char newChar) //将新字符替换旧字符 3. String replaceFirst(Stri ...
- metasploitable2更改root密码
metasploitable2这个系统众所周知,一个用户名和密码是msfadmin.但是这个账号权限不全,我们想要改root密码来登陆为所欲为.也没试过破解,咱们索性就改了吧. 就简单几行代码.. ...
- js 函数节流和防抖
js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...
- h5 页面 禁止网页缩放
//禁用双指缩放: document.documentElement.addEventListener('touchstart', function (event) { if (event.touch ...
- laravel使用总结(一)
安装 composer create-project laravel/laravel learnlaravel5 --prefer-dist v5.3.* 安装成功之后会自动生成一个key > ...
- go语言碎片整理之标准库log
log Go语言内置的log包实现了简单的日志服务.本文介绍了标准库log的基本使用. 使用Logger log包定义了Logger类型,该类型提供了一些格式化输出的方法.本包也提供了一个预定义的“标 ...
- (二十三)Python 3 文件操作
文件处理流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 打开文件的模式有三种: 只读模式(默认) 只写模式(不可读,不存在则创建,存在则覆盖) 追加模式(可读,不存在则 ...
- PADS规则设计-对某一网络/元件单独设置规则
转载请注明出处,并附带本文网址https://www.cnblogs.com/brianblog/p/9894867.html, 在PADS规则设计中可能会遇到某个走线与另一个走线之间的间距,普通规则 ...
- JSP中使用<c:forEach>标签循环遍历元素
转载:http://blog.csdn.net/hero_cheng/article/details/51924577