{"id":14990609,"url":"https://github.com/hifizz/typescript-react-redux-ie8","last_synced_at":"2025-04-15T03:29:18.493Z","repository":{"id":99694083,"uuid":"130710942","full_name":"hifizz/typescript-react-redux-ie8","owner":"hifizz","description":"typescript-react-redux-ie8, demo online: ","archived":false,"fork":false,"pushed_at":"2018-06-21T04:56:05.000Z","size":2956,"stargazers_count":4,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-13T19:07:29.992Z","etag":null,"topics":["cssmodules","ie8","immutablejs","react","redux","typescript"],"latest_commit_sha":null,"homepage":"https://hifizz.github.io/typescript-react-redux-ie8/demo/index.html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hifizz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-23T14:37:38.000Z","updated_at":"2021-12-26T08:49:10.000Z","dependencies_parsed_at":"2023-07-31T11:46:33.303Z","dependency_job_id":null,"html_url":"https://github.com/hifizz/typescript-react-redux-ie8","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hifizz%2Ftypescript-react-redux-ie8","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hifizz%2Ftypescript-react-redux-ie8/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hifizz%2Ftypescript-react-redux-ie8/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hifizz%2Ftypescript-react-redux-ie8/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hifizz","download_url":"https://codeload.github.com/hifizz/typescript-react-redux-ie8/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249000718,"owners_count":21196345,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cssmodules","ie8","immutablejs","react","redux","typescript"],"created_at":"2024-09-24T14:20:27.087Z","updated_at":"2025-04-15T03:29:18.461Z","avatar_url":"https://github.com/hifizz.png","language":"TypeScript","readme":"# TypeScript-React-Redux (IE8+)\n本项目是一个兼容IE8的 TypeScript + React + Redux + immutablejs 的项目模板。\n为了降低上手难度，我在项目中写3个DEMO：\n- todomvc without immutabeljs (ts + react + redux)\n- [todo] todomvc with immutablejs (ts + react+ redux + immutablejs)\n- [todo] hackernews (ts + react + redux + immutablejs)\n\n使用时，只需要把这些文件夹删掉就好了。\n\n## Show me the code\nCode在此：[TypeScript-React-redux-ie8](https://github.com/hifizz/typescript-react-redux-ie8)  \nDemo在此：[Todomvc-Typescript-react-redux-immutable](https://hifizz.github.io/typescript-react-redux-ie8/demo/index.html)\n\n## Usage\n使用方法很简单，只需要把项目克隆到本地，然后安装依赖就可以跑起来了。\n```bash\n$ git clone https://github.com/hifizz/typescript-react-redux-ie8.git\n\n# 为了顺利的安装依赖，这里最好是使用cnpm，npm, 不要使用yarn\n# 有以下几点原因：\n# 1.yarn 会更新某些依赖，造成不可知错误。(redux 会依赖 react@16.x.d.td)\n# 2.node-sass很容易安装失败。\n$ cnpm install\n\n# 安装完依赖之后，如果你用 VS Code 打开，它极大概率上用的是最新版本的 TypeScript\n# 这会报一些错误，可能让你感到疑惑，可见下贴图。\n\n# then open http://localhost:8800 in your browser.\n$ cnpm start\n\n# 在IE8浏览器上打开（ie8，9不支持socket，所以不能热更新，下面命令可以手动刷新）\n# then open http://localhost:9900 in your browser\n$ npm start:ie\n```\n\n\u003e 在 VS Code 中打开时需要设置TypeScript版本\n\n![ts-2.8.3](./docs/images/ts-2.8.3.png)\n![ts-2.3.4](./docs/images/ts-2.3.4.png)\n\n## 其他的一些命令\n```bash\n# compile src to target code\n$ npm run build\n\n# format code style by prettier\n$ npm run format\n```\n\n---\n\n## Feature\n- 兼容IE8\n- TypeScript \u0026\u0026 ES6/ES7/ES8 语法\n- [css-modules](https://github.com/css-modules/css-modules)\n- [Prettier](https://prettier.io/)\n- [tslint](https://github.com/palantir/tslint)\n- Webpack@1.x\n- Promise\n- React@0.14.9\n- [Redux](https://github.com/reactjs/redux) 状态管理\n- [Redux-thunk](https://github.com/gaearon/redux-thunk)\n- [ts-jest](https://github.com/kulshekhar/ts-jest)\n- [immutablejs](https://github.com/facebook/immutable-js)\n- [typedoc](https://github.com/TypeStrong/typedoc)\n- webpack-dev-server 热更新、无刷新，IE8 可以手动刷新（不支持websocket）\n\n\u003e React 版本为0.14.9，使用了ES6的最新语法编写，（万一有一天，万一...）可以无缝过渡到React新版本，也可以同一套代码使用两个不同版本的React输出两套代码跑在不同的浏览器上\n\n### 如何兼容IE8\n#### 兼容IE8的本质是什么\n- 模拟 ES5 ES6 新api\n- 用[\"\"]引用 IE8 下某些保留关键字\n- 模拟 console\n- 避免使用`Object.definePropotype`，或者使用替代方式\n\n1.IE8全面支持ES3的规范，但完全不支持ES5（IE9支持部分ES5，不完全），所以ES5的API需要模拟。因此我们需要`polyfill`和`shim`。因此我们需要使用`es5-shim`,同时引用`es5-shim/sham`。IE8也不支持console，具体表现是IE8下console为undefined，于是需要把这货定义一下，把console的各种方法用空函数代替。同时，我们使用ES6的语法来编写源代码，ES5和ES6的新API在IE8上是没有的，我们需要`babel-polyfill`帮助补齐。看到这里，貌似一切万事大吉，但是，凡事有个但是，ES5定义的`Object.definePropotype`这个api是无法完全模拟出来的，即使是上面的`es5-shim`。关于这一点，社区的解决方案是：不使用这个api，可现有大部分第三方都是用这个api来定义属性的。解决方案：\n- babel preset loose = true\n- TypeScript target = es3\n\n#### 兼容的做法:\n- shim \u0026 polyfill\n- TS target 设置为 `es3`\n- post-loader 使用 es3-loader\n- uglyifyjs 解决IE8 问题\n\n以上步骤缺一不可。\n\n本项目为了兼容ie8，使用了低版本的react@0.14.9、webpack@1.12.9和react-router@1.0.2，\n使用上与高版本的可能不同，文档可参考根目录下node_molules对应的每个包的docs。\n\n细节往下看这里。\n\n#### shim \u0026 polyfill\n```bash\n$ npm i es5-shim\n$ npm i console-polyfill\n$ npm i babel-polyfill\n$ npm i es6-promise\n```\n\n```js\n// webpack.config.js\nmodule.exports = {\n  entry: {\n    vendors: [\n      \"es5-shim\",\n      \"es5-shim/es5-sham\",\n      'console-polyfill',\n      'babel-polyfill',\n      'es6-promise',\n      'fetch-ie8',\n      'qs'\n    ]\n  }\n}\n```\n\n#### TypeScript target 设置为 `es3`\n在根目录下有一份 `tsconfig.json` 文件，这是 TypeScript 的项目配置文件，类似于babel，在项目下有一个`.babelrc`。\n只要将其中的 compilerOptions.target 设置为 `es3` 即可。这代表TypeScript将会把源代码转译成 ES3 规范下可跑的代码。\n\n```json\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    \"target\": \"es3\"\n  }\n}\n```\n\n### CSS 解决方案\n本项目采用SASS + PostCSS + CSS Module 编写和处理CSS。CSS Module 是一个Scope CSS的方案。PostCSS 后处理器主要用到了[`autoprefixer`](https://github.com/postcss/autoprefixer)和[`cssnano`](http://cssnano.co/)两个插件，前者是用来给浏览器自动添加前缀的--基于[`caniuse`](http://caniuse.com/)的数据。SASS的使用纯属个人喜好，毕竟我已经使用SASS三年了。\n对于本项目来说，CSS的编译过程是这样的：编写SCSS文件 -\u003e SASS编译 -\u003e PostCSS autoprefixer -\u003e CSS loader -\u003e Style loader。\n\n#### CSS 目录组织\n可选的style目录风格。\n```bash\n.root\n├── src\n│   ├── style\n│   │   ├── global.scss\n│   │   ├── helper.scss\n│   │   ├── mixins.scss\n│   │   ├── placeholder.scss\n│   │   ├── theme.scss\n│   │   └── variables.scss\n```\n此目录的设计是因为SCSS 和 CSS Module结合，必然会有一些SASS的基本函数、placeholder、mixin，需要一个helper帮助你管理它们。\n因此这个目录是完全公用的。在目录外你只需引入`helper.scss`即可。`global.scss`则是一些项目通用的CSS，例如reset的css。\n`mixins.scss` `placeholder.scss` `theme.scss` `variables.scss` 则是被 `helper.scss` 引用，你不必多关心。\n\n#### CSS Module\n下面是 CSS Module 方案和纯 SCSS 方案的一个对比：\n\n**before**\n```js\nimport * as React from \"react\";\nimport \"./index.scss\";\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cdiv className=\"app-container\"\u003e\n        \u003cdiv className=\"app-header\"\u003eheader\u003c/div\u003e\n        \u003cdiv className=\"app-content\"\u003econtent\u003c/div\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n```scss\n.app-container {\n  color: #4d4d4d;\n}\n.app-header {\n  background-color: green;\n}\n.app-content {\n  background-color: red;\n}\n```\n\n**after**\n```js\n// ./src/app.tsx\nimport * as React from \"react\";\nimport * as style from \"./index.scss\";\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cdiv className={style.container}\u003e\n        \u003cdiv className={style.header}\u003eheader\u003c/div\u003e\n        \u003cdiv className={style.content}\u003econtent\u003c/div\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n```scss\n// ./src/index.scss\n.container {\n  color: #4d4d4d;\n}\n.header {\n  background-color: green;\n}\n.content {\n  background-color: red;\n}\n```\n\n### 一些重要问题以及解决方案\n#### 如何查找开源库旧版本文档\n初始，我知道React0.14.9是支持IE8的，于是我在Google上开始搜索TypeScript为什么不支持IE8，于是得到一些issue信息，TypeScript是支持IE8的，但是某些版本有问题。翻了十几条issue的大楼之后得到信息，TypeScript@2.3.4可以很好的运行。这解决了第一个问题。接下来我需要确定React配套的状态管理库，redux使用哪个版本。这个问题比较纠结，\n\n接下来我遇到一堆问题这些旧版本库，我怎么知道它怎么用呢？API有哪些？参数是什么类型的？\n\n不要慌不要慌，太阳落了有月光。\n\n为了解决这个问题，我可没少费心思。经过探索，主要方式有以下几种：\n- Dash\n- GitHub 源码\n\n##### Dash\n![](./docs/images/dash-react-history.png)\n\n#### TypeScript 如何和 `React-redux` 结合\n```tsx\n// 单纯 TypeScript + React 模板\nimport * as React from 'react';\n\ninterface IAppProps {\n  name: string;\n  age?: number;\n}\n\ninterface IAppState {\n  color: blue;\n}\n\nclass App extends React.Component {\n  render() {\n    const props = this.props;\n    return (\n      \u003cdiv\u003e\n        \u003cdiv\u003ehello App\u003c/div\u003e\n        \u003cdiv\u003e{`${props.name} now is ${props.age} years old. His color is ${this.state.color}`}\u003c/div\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nexport default App\n```\n\n```tsx\n// TypeScript + React + redux 模板\nimport React from 'react';\nimport { connect, Dispatch } from 'react-redux';\n\ninterface IAppStateProps {}\n\ninterface IAppDispatchProps {}\n\ntype IAppProps = IAppStateProps \u0026 IAppDispatchProps;\n\ninterface IAppState {}\n\nclass App extends React.Component\u003cIAppProps, IAppState\u003e {\n  public render() {\n    return (\n      \u003cspan\u003eBody\u003c/span\u003e\n    );\n  }\n}\n\nconst mapStateToProps = (state: any): IAppStateProps =\u003e {\n  return {\n      // ...mapStateToProps\n  };\n};\n\nconst mapDispatchToProps = (dispatch: Dispatch\u003cany\u003e): IAppDispatchProps =\u003e {\n  return {\n    // ...mapDispatchToProps\n  };\n};\n\nexport default connect(\n  mapStateToProps,\n  mapDispatchToProps,\n)(App);\n```\n\n#### TypeScript 如何 使用 CSS Module\n1.安装 `typings-for-css-modules-loader` [GitHub](https://github.com/Jimdo/typings-for-css-modules-loader)\n\n### 兼容IE8的一些前端框架：\n- 京东的nerv [Nerv – 京东高性能前端框架](http://jdc.jd.com/archives/212126)\n- 腾讯的[Omi(x)](https://github.com/AlloyTeam/omi)\n- 百度的[san](https://github.com/baidu/san)\n- 司徒正美的[anu](https://github.com/RubyLouvre/anu) [avalon](https://github.com/RubyLouvre/avalon)\n\n### CHANGELOG\n- 每次新加功能需要修改 CHANGELOG.md 以便溯源追踪。书写规则请仔细阅读[CHANGELOG规范](https://keepachangelog.com/en/1.0.0/)。\n\n### TODO\n- webpack config 设置多个环境\n- webpack merge\n\n### problem\n- 现在的webpack uglifyJS plugin 混淆之后的代码不能在ie8上运行 [https://github.com/SamHwang1990/blog/issues/6](https://github.com/SamHwang1990/blog/issues/6)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhifizz%2Ftypescript-react-redux-ie8","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhifizz%2Ftypescript-react-redux-ie8","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhifizz%2Ftypescript-react-redux-ie8/lists"}