idseventeen / koa2-connect-history-api-fallback Goto Github PK

Fallback to index.html for applications that are using the HTML 5 history API

License: MIT License

TypeScript 82.66% JavaScript 17.34%

vue-router history koa-middleware koa2 connect-history-api-fallback

koa2-connect-history-api-fallback's Introduction

README.md

koa2的一个中间件，用于处理vue-router使用history模式返回index.html，让koa2支持SPA应用程序。
我只是一个搬运工，让它兼容Koa2而已。详细说明请到原作者项目库查看
bripkens作者的connect-history-api-fallback

Install

$ npm install --save 'koa2-connect-history-api-fallback'

Use

在原作者的使用方法下增加了白名单选项，原作者的插件默认会将所有的请求都指向到index.html，这样可能就会导致项目内其他路由也被指向到index.html 使用方法如下：

const Koa = require('koa');
const { historyApiFallback } = require('koa2-connect-history-api-fallback');
// 或者当你使用 ES6 语法，你可以这样
import { historyApiFallback } from 'koa2-connect-history-api-fallback';
// 或者
import historyApiFallback from 'koa2-connect-history-api-fallback';

const app = new Koa();

// handle fallback for HTML5 history API
app.use(historyApiFallback({ whiteList: ['/api'] }));

// other middlewares
app.use(...);

Example

const Koa = require('koa');

// require 'koa2-connect-history-api-fallback' middleware
const { historyApiFallback } = require('koa2-connect-history-api-fallback');

// create app
const app = new Koa();

// use historyApiFallback
app.use(historyApiFallback());

// other middlewares
app.use(...);

LICENSE

Follow MIT License

koa2-connect-history-api-fallback's People

Contributors

Stargazers

Watchers

Forkers

six-666 stonewen cyonet zmgithub lgwebdream rainmen-xia

koa2-connect-history-api-fallback's Issues

不会先检查 index.html 是否存在

例如项目结构是这样的：

当访问 http://site.com/en/ 的时候，直接返回 /index.html, 而不是 /en/index.html, 也就是没有先判断是否存在相应的 index.html 是否存在

导入包的时候解构是必要的吗

// README.md
import { historyApiFallback } from 'koa2-connect-history-api-fallback';

因为整个包其实只暴露一个函数，我认为可以只保留一种用法：

import historyApiFallback from 'koa2-connect-history-api-fallback';
// OR
const historyApiFallback = require('koa2-connect-history-api-fallback')

以上只是一个建议，更大的问题出在我最近使用 Nodejs 较高版本的一个新特性的时候：
https://nodejs.org/docs/latest-v13.x/api/esm.html#esm_package_json_type_field

// package.json
{
  "name": "test",
  "main": "index.js",
  "type": "module",
  "dependencies": {
    "koa": "^2.13.0",
    "koa2-connect-history-api-fallback": "^0.1.3"
  }
}

其中的"type":"module"，Nodejs 会将文件夹内的 JS 文件当作 ES Module 来加载（即原生支持 ES Module），以下是我的代码：

import Koa from "koa"
import historyApiFallback from 'koa2-connect-history-api-fallback';

new Koa()
  .use(historyApiFallback())
  .listen(80)

以下是报错：

file:///C:/Users/CHOYSEN/Desktop/test/app.js:5
  .use(historyApiFallback())
       ^

TypeError: historyApiFallback is not a function
    at file:///C:/Users/CHOYSEN/Desktop/test/app.js:5:8
    at ModuleJob.run (internal/modules/esm/module_job.js:140:23)
    at async Loader.import (internal/modules/esm/loader.js:165:24)
    at async Object.loadESM (internal/process/esm_loader.js:68:5)

而使用解构的话：

import Koa from "koa"
import { historyApiFallback } from 'koa2-connect-history-api-fallback';

new Koa()
  .use(historyApiFallback())
  .listen(80)

file:///C:/Users/CHOYSEN/Desktop/test/app.js:2
import { historyApiFallback } from 'koa2-connect-history-api-fallback';
         ^^^^^^^^^^^^^^^^^^
SyntaxError: The requested module 'koa2-connect-history-api-fallback' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'koa2-connect-history-api-fallback';
const { historyApiFallback } = pkg;
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:98:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:137:5)
    at async Loader.import (internal/modules/esm/loader.js:165:24)
    at async Object.loadESM (internal/process/esm_loader.js:68:5)

两种导入方案都不能方便的使用，所以才有了开头的建议。如果你同意这个建议的话，我会提交PR。

未指定Options，访问时会报错

const app = new Koa()
// historyApiFallback 没有传入参数
app.use(historyApiFallback())
app.listen(80)

浏览器访问时，返回 500 错误

这是 Console 里的错误：

  TypeError: Cannot read property 'htmlAcceptHeaders' of undefined
      at acceptsHtml (C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa2-connect-history-api-fallback\dist\index.js:122:41)
      at C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa2-connect-history-api-fallback\dist\index.js:66:35
      at step (C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa2-connect-history-api-fallback\dist\index.js:37:23)
      at Object.next (C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa2-connect-history-api-fallback\dist\index.js:18:53)
      at C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa2-connect-history-api-fallback\dist\index.js:12:71
      at new Promise (<anonymous>)
      at __awaiter (C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa2-connect-history-api-fallback\dist\index.js:8:12)
      at C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa2-connect-history-api-fallback\dist\index.js:49:16
      at dispatch (C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa-compose\index.js:42:32)
      at C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa-compress\lib\index.js:38:11


  TypeError: Cannot read property 'htmlAcceptHeaders' of undefined
      at acceptsHtml (C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa2-connect-history-api-fallback\dist\index.js:122:41)
      at C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa2-connect-history-api-fallback\dist\index.js:66:35
      at step (C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa2-connect-history-api-fallback\dist\index.js:37:23)
      at Object.next (C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa2-connect-history-api-fallback\dist\index.js:18:53)
      at C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa2-connect-history-api-fallback\dist\index.js:12:71
      at new Promise (<anonymous>)
      at __awaiter (C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa2-connect-history-api-fallback\dist\index.js:8:12)
      at C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa2-connect-history-api-fallback\dist\index.js:49:16
      at dispatch (C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa-compose\index.js:42:32)
      at C:\Users\CHOYSEN\Desktop\graduation-project\server\node_modules\koa-compress\lib\index.js:38:11

版本更新后，请及时更新文档

要不然直接按文档来就报错了：historyApiFallback is not a function
现在等这么引用了：app.use(historyApiFallback.default({ whiteList: ['/api'] }));

idseventeen / koa2-connect-history-api-fallback Goto Github PK

koa2-connect-history-api-fallback's Introduction

README.md

Install

Use

Example

LICENSE

koa2-connect-history-api-fallback's People

Contributors

Stargazers

Watchers

Forkers

koa2-connect-history-api-fallback's Issues

不会先检查 index.html 是否存在

导入包的时候解构是必要的吗

未指定Options，访问时会报错

版本更新后，请及时更新文档

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent