网页项目怎么自动生成代码？

Programming
1

我写了个浏览 LoL 英雄信息的网页 LoL Champion Viewer ，我把全部的英雄名直接写在代码里：

const champions = ["Aatrox","Ahri","Akali","Alistar", ...]

但是每次 LoL 版本更新，有新英雄的话，我需要手动修改这个代码，有没有办法自动修改这个代码？是不是有什么 bundler、模版之类的工具。我想把 champions 列表直接写死 JS 代码里，而不是用一个单独的 JSON 文件，是想避免多一次网络请求。我想过用 Sed 来替换，但是感觉不太搭，应该有更好的工具。

下面是生成 LoL 英雄名的方法：

$ curl https://ddragon.leagueoflegends.com/cdn/10.22.1/data/en_US/champion.json \
  > | jq '.data | keys'
[
  "Aatrox",
  "Ahri",
  "Akali",
  "Alistar",
  "Amumu",
...
2

为什么不用万能的 C preprocessor 呢

3

JS社区不兴这种文本插入修改源码, 他们喜欢用Babel基于AST生成的. 然而为了这种小事配babel也太麻烦了, 所以还是用传统的sed吧

4

请求JSONP 格式的内容，JS 里解析就行了https://ddragon.leagueoflegends.com/cdn/10.22.1/data/en_US/champion.jsonp

5

不知道有这个。

主要是想省去一次 HTTP 请求，现在想想好像属于过早优化了，GitHub Page 使用 HTTP/2，多一次请求可能没啥影响。

那有没有把 <script src="champions.js"></script> 转换成 <script> const champions = ["Akali", "Ahri"]; </script> 的工具？

也就是把这个 2 个文件：

// champions.js
const champions = ["Akali", "Ahri"];

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <script src="champions.js"></script>
  </head>
  <body>
  </body>
</html>

转换成这 1 个文件：

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <script>
      const champions = ["Akali", "Ahri"];
    </script>
  </head>
  <body>
  </body>
</html>
6

这个不就是 cpp 的应用么，写成

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <script>
    #include "champions.js"
    </script>
  </head>
  <body>
  </body>
</html>

然后用 cpp 过下就好了。

不想用 C 编译器的 preprocessor，也有用 JS 写的，但实际上功能是一样的。

用其它语言重新造的轮子也很多。Haskell 和 OCaml 都各自造了一次 cpp。其它更 exotic 的 macro preprocessor 也不是没有，有兴趣我也可以推几个。

1 个赞
7 
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <script>
      @@LIST@@
    </script>
  </head>
  <body>
  </body>
</html>

sed -i "s/@@LIST@@/$(cat champions.js)/" index.html
8

噢，不知道还有这个包，还以为你就是指的是 C 的预处理器。

Nice，champions.js 只有一行没问题，旦不支持多行：

$ gsed -i "s/@@LIST@@/$(cat champions.js)/" x.html
gsed: -e expression #1, char 22: unterminated `s' command

回头试试 awk、perl，或干脆手写。