各式各样功能强大的小语言是我厂机器编程的特色,为了让更多的同学提前感受到 DSL 的威力,我们开发了 demo 应用:https://demo.openresty.com.cn/。
Demo 里面,需要添加一些范例代码,方便用户直接体验。这些代码,可以通过后端 API 获取,也可以直接编译到前端代码里。目前范例很少,直接打包到一起应该是最简单的做法。
但是如何打包是个问题。经过一些研究,我觉得这样做好:
- 负责小语言的同事直接把范例写在项目仓库里,Edgelang 就用 .edge 扩展名,Navlang 就用 .nav 扩展名
- 前端在 webpack 里实现一个
requireAll
的功能,把所有代码当成纯文本用 raw-loader 加载进来 - 这样添加了代码后,重新 build 一下就好。范例文件可以用 lazy-load 的方式加载
Webpack 提供了一个方法叫 require.context
,可以深度遍历一个目录,返回一个 context module
,用这个 API 我们就可以动态的加载这个目录下的文件——具体的讲解和参数说明大家看下文档吧,这个部分中文资料不太多,我不太确定译名。我们可以在范例代码的目录下放一个 index.js,负责加载所有代码范例:
function requireAll(r) {
r.keys().forEach(r);
}
const Languages = [
'edgelang',
'navlang',
];
let context = require.context('./edgelang', true, /\.(edge|css)$/);
requireAll(context);
context = require.context('./navlang', true, /\.(nav|css)$/);
requireAll(context);
export default Languages;
然后我们改一下 webpack.config.js 就可以了。
module.exports = {
module: {
rules: [
{
test: /\.(nav|edge|fan)$/,
use: 'raw-loader',
},
],
},
};
发表回复