blog - June 01, 2019

零配置运行 ES6/TS/React/Vue/ 代码

Falco 是基于 webpack,npm 的一层封装。解决的问题是 demo 代码的构建打包问题,而直接运行代码是附加的一个功能

项目地址:https://github.com/fratercula/falco

背景

JavaScript 模块或者框架需要 demo 展示来说明使用方式,例如 antd 里面就有很多 demo 的展示。那么怎么快速生成这些 demo 呢,一些框架可以做类似事情,例如 docz

docz 只是解决本地已经安装的问题,也就是说 demo 的展示需要本地已经安装好依赖。那这样就有问题了,如果 demo 代码是各种 js 依赖的,那就是说要不断的本地安装依赖。无法运行时构建

方案

动态分析代码所需要的依赖,然后自动安装对应的依赖,再用 webpack 进行构建,完美解决上述问题。详细可以查看 Falco 的实现。简单的步骤为

  1. 分析代码依赖,获取需要安装的 js 依赖
  2. 安装依赖到系统临时目录
  3. webpack 构建

扩展

开发这个工具的主要目的就如上述所说,但是开发过程中发现,结合 webpack-dev-server 可以做到运行和构建 js 代码,只要在某些步骤中做一些处理

  1. 分析代码过程,需要递归的去分析文件依赖树,再进行分析 js 包的依赖
  2. 此步骤还是一样
  3. webpack 构建,区分运行或者打包模式,然后选择使用 webpack-dev-server 运行构建

其他

开发过程中遇到的一些问题

  1. node 方式使用 webpack-dev-server 时候需要手动引入一些依赖
1
2
3
4
...
entry.unshift('webpack-dev-server/client?', 'webpack/hot/dev-server')
plugins.unshift(new webpack.HotModuleReplacementPlugin())
...

这里有个特殊的地方 webpack-dev-server/client?,问好后面不能带域名跟端口,可能跟我的使用方式有关,不过这些依赖在新版已经不需要加上了,所以也不用纠结了

  1. @babel/plugin-transform-runtimeabsoluteRuntime 配置,这个配置在原来 babel 官方是没有展示的,我自己翻源代码找到的。不过后面 babel 官方把这个设置放出来了。相关 issue
AcyOrt - 基于 Node.js 的静态网站生成框架 关于 react-router 的 browserHistory 模式