[PARCEL]还是很快快，代理跨域parcel-proxy-server

今天我在运行echarts实例代码时，请求数据时发现跨域了，想到PARCEL启动时本身就有一个本地的server服务，那能不能在这个服务里代理一下我的api请求呢？
去github上parcel的issue里一搜，还真有大神写好了的

parcel-proxy-server

瞟了眼代码好像是用express+http-proxy-middleware+parcel的api实现的，不研究，研究就不快快了，别人写好用就行了

测试时遇到了跨域问题

跑一个echarts 1千w点的实例代码时，发现数据资源跨域了，请求不到

找到官网的请求地址

哦不跨域了

试试刚才找的parcel-proxy-server
在npm简介里有他的例子，parcel-proxy-server:https://www.npmjs.com/package/parcel-proxy-server

proxy.js

const ParcelProxyServer = require('parcel-proxy-server');

// configure the proxy server

const server = new ParcelProxyServer({

  entryPoint: './path/to/my/entry/point',

  parcelOptions: {

    // provide parcel options here

    // these are directly passed into the

    // parcel bundler

    //

    // More info on supported options are documented at

    // https://parceljs.org/api

    https: true

  },

  proxies: {

    // add proxies here

    '/api': {

      target: 'https://example.com/api'

    }

  }

});

// the underlying parcel bundler is exposed on the server

// and can be used if needed

server.bundler.on('buildEnd', () => {

  console.log('Build completed!');

});

// start up the server

server.listen(8080, () => {

  console.log('Parcel proxy server has started');

});

官网没有很详细的使用方法，不过没关系，稍微读一下代码。

1.怎么运行？参数配置？

看最后server.listen,哦很眼熟，这个JS起了一个httpserver，那这个JS尝试一下用node运行一下这个js node ./proxy.js
起来了，但是为什么能这么启动PARCEL打包呢？
我又去到parcel官网文档中找到了，parcel提供了API用js启动：https://parceljs.org/api.html
稍微ctrl点一下ParcelProxyServer找下代码，可以发现entryPoint，parcelOptions，这两个参数，全部都是用于parcel的打包配置，所以都去PARCEL官网找就没问题。

2.Proxy？

再点一下ParcelProxyServer代码，看到他的引用

const fs = require('fs');
const https = require('https');
const express = require('express');
const Bundler = require('parcel-bundler');
const proxyMiddleware = require('http-proxy-middleware');
const opn = require('opn');
const selfSigned = require('selfsigned');

大大的express和 proxy-middleware，那猜测他是express起的服务，使用http-proxy-middleware中间件实现的请求代理，然后用parcel的api进行打包
那简单了，去翻http-proxy-middleware的文档！https://www.npmjs.com/package/http-proxy-middleware

最后我的proxy代码是这样的，请求/api路径会被中间件拦截，后台去请求https://www.echartsjs.com

const ParcelProxyServer = require('parcel-proxy-server');

// configure the proxy server
const server = new ParcelProxyServer({
  entryPoint: './index.html',
  parcelOptions: {},
  proxies: {
    // add proxies here
    '/api': {
      target: 'https://www.echartsjs.com',
      changeOrigin: true,
      pathRewrite: {
        '/api': '/examples'
      }
    }
  }
});

// the underlying parcel bundler is exposed on the server
// and can be used if needed
server.bundler.on('buildEnd', () => {
  console.log('Build completed!');
});

// start up the server
server.listen(8080, () => {
  console.log('Parcel proxy server has started');
});

又可以开心的测试了

image.png