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

[LoeiFy]

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 时候需要手动引入一些依赖

...
entry.unshift('webpack-dev-server/client?', 'webpack/hot/dev-server')
plugins.unshift(new webpack.HotModuleReplacementPlugin())
...

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

2. @babel/plugin-transform-runtime 的 absoluteRuntime 配置，这个配置在原来 babel 官方是没有展示的，我自己翻源代码找到的。不过后面 babel 官方把这个设置放出来了。相关 issue

[saysmy]

你好，如果这样内联manifest，没改动一个文件，manifest都会发生改变，导致所有内联了manifest的html都会改变，这如何解决？

[LoeiFy]

@saysmy 这涉及到 webpack 构建没有改动文件这个 manifest 就不应该改变问题，好像这个是有解的。好像 md5hash 插件也是有问题的。具体我没有仔细研究