源码解析(2020-2030)

# [提纲]兼容IE8的MVC框架-2017(anujs)

# 兼容IE8+的框架

  • anujs @nice
  • react0.14.x @nice
  • regular
  • avalon2

# 兼容IE8+的框架 @other

  • omio ??
  • yoxjs
  • react-lite
  • vue1
  • angular1
  • sanjs @old
  • nerv.js @old
  • knockoutjs @old
  • Nec + Nej @old

# 常用文档

# 小型MVC

# 通用模板 @nice

// es3ify-loader -> 保留字给你加上引号
// 编译前
function(t) { return t.default; }
// 编译后
function(t) { return t["default"]; }


//  UglifyJS已提供了对IE浏览器的支持，不需要额外引入es3ify-loader
{
  mode: 'production',
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          ie8: true
        }
      })
    ]
  }
}

// 使用commonjs -> 放弃tree shaking 
@babel/plugin-transform-modules-commonjs


require('core-js/features/object/define-property')
require('core-js/features/object/create')
require('core-js/features/object/assign')
require('core-js/features/array/for-each')
require('core-js/features/array/index-of')
require('core-js/features/function/bind')
require('core-js/features/promise')

# anujs

resolve: {
   alias: {
      react: "anujs",
      "react-dom": "anujs",
      // 若要兼容 IE 请使用以下配置
      // 'react': 'anujs/dist/ReactIE',
      // 'react-dom': 'anujs/dist/ReactIE',
      rematch: "anujs/dist/Rematch.js"
      router: "anujs/dist/Router.js",
      rematch: "anujs/dist/Rematch.js",

      // 如果引用了 prop-types 或 create-react-class
      // 需要添加如下别名
      'prop-types': 'anujs/lib/ReactPropTypes',
      'create-react-class': 'anujs/lib/createClass',
      //如果你在移动端用到了onTouchTap事件
      'react-tap-event-plugin': 'anujs/lib/injectTapEventPlugin',  
   }
},

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

// https://github.com/RubyLouvre/anu-ie8-example/blob/master/src/index.js
import 'es5-shim'; //IE8 ^4.5.10
import 'object-create-ie8';//这样就不用加上es5-sham
import 'object-defineproperty-ie8';
import 'console-polyfill';
//只有打开了F12才会有这个方法
import 'json3';  //比IE8的JSON好用
import 'bluebird'; //性能超高的Promise实现
import 'fetch-polyfill2'; //fetch 实现
import 'media-match'

// npm install uglifyjs-webpack-plugin@1.0.0-beta.2  
// UglifyJs3
// 测试下来有点问题 司徒大佬随手粘贴的??
new UglifyJsPlugin({
    parallel: {
        cache: true,
        workers: 4,
    },
    uglifyOptions: {
        mangle: {
            eval: true,
            toplevel: true,
        },
        parse: {
            html5_comments: false,
        },
        output: {
            comments: false,
            ascii_only: true,
            beautify: false,
        },
        ecma: 5,
        // ??
        // ie8: false, 
        ie8: true,
        compressor: {
            properties: true,
            unsafe: true,
            unsafe_comps: true,
            unsafe_math: true,
            unsafe_proto: true,
            unsafe_regexp: true,
            unsafe_Func: true,
            dead_code: true,
            unused: true,
            conditionals: true,
            keep_fargs: false,
            drop_console: true,
            drop_debugger: true,
            reduce_vars: true,
            if_return: true,
            comparisons: true,
            evaluate: true,
            booleans: true,
            typeofs: false,
            loops: true,
            toplevel: true,
            top_retain: true,
            hoist_funs: true,
            hoist_vars: true,
            inline: true,
            join_vars: true,
            cascade: true,
            collapse_vars: true,
            negate_iife: true,
            pure_getters: true,
            pure_funcs: true,
            // arrows: true,
            passes: 3,
            ecma: 5,
        },
    },
    sourceMap: false,
}),

# anujs - 模板

{
  loader: 'babel-loader',
  options: {
    presets: [
      ['@babel/preset-env', {
        loose: true,
        modules: 'commonjs',
      }]
    ]
  }
}

<!DOCTYPE html> 
<meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>

import createReactClass from 'create-react-class';

<!-- media-match polyfill的报错处理  -->
<script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>

<!-- 或者加上去这句话 IE9需要改为IE10 -->
<!--[if lt IE 10]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

# 存在以下问题
1. 对象不支持“getComputedStyle”属性或方法
2. 下拉框不能正常使用
3. 日期选择器位置漂移

# anujs-模板 @old

# React14

虽然过时了
但很多人都会react16, 学习成本低

# React14 - 模板

考虑node_modules成功安装后打包压缩
下次本地解压

比较诡异，原来试过是兼容IE8+的

在nodejs-v10.15.1时 
打包测试仅兼容IE9

# React14-模板 @old

// 目前报错
  12 | 
  13 | ReactDom.render(
> 14 |     <BrowserRouter>
     |     ^
  15 |         <App/>
  16 |     </BrowserRouter>
  17 |     ,

 @ multi app

# React-Lite

IE8+
兼容React15

# regular

# regular - 模板

# avalon

可以兼容IE7

# avalon - 模板

# yoxjs

  • 还没试成功...

# yoxjs-模板

# omio

// IE填坑

# San

百度
类Vue的开发体验 @nice

webpack打包不兼容IE8 @old 
没有支持IE8+的官方UI @old

为了兼容 IE8, 
放弃 ES6的 export 和 import 语法,
使用es5中的module.exports 和 require 语法

UI还是采用bootstrap等 cdn引入的

# San - 模板

@from https://www.zhihu.com/question/65498751/answer/294265707

# Vue1

# Angular1

  • angular更迭快, 用老早过时的会心理不平衡

# Angular1 - 模板

# NervJS

@from 京东

A blazing fast React alternative, compatible with IE8 and React 16

至今没找到兼容IE8+(+router)的例子....

# NervJS - 模板

# Knockout @old

过时
不好用

# Knockout- 模板

# Backbone

# Nec + Nej @old

# 参考

← [Note]JavaScript框架设计-2017(v2) →