按任务学习
使用固定版本的 CDN 模块添加浏览器分子检查
无需添加打包工具或后端,即可在小型浏览器页面中加载已发布的 WebAssembly 软件包。
完成内容
使用固定发布版本的模块导入,在浏览器控制台中得到阿司匹林的计算结果。
步骤
- 创建一个通过 HTTPS 或本地 Web 服务器提供的小型 HTML 页面。
- 粘贴下方固定版本的模块脚本,并在浏览器中加载页面。
- 确认控制台输出阿司匹林的 180.16,然后释放分子对象。
<script type="module">
import init, { parse_smiles } from "https://cdn.jsdelivr.net/npm/@kent-tokyo/chematic@1.1.7/chematic_wasm.js";
await init();
const mol = parse_smiles("CC(=O)Oc1ccccc1C(=O)O"); // 阿司匹林
console.log(mol.molecular_weight().toFixed(2)); // 180.16
mol.free();
</script>预期结果
固定版本的 WebAssembly 模块初始化后,浏览器控制台会输出阿司匹林的分子量 180.16。SMILES 计算在浏览器中运行。
遇到问题时
不要将明确的发布版本替换为 @latest。某些浏览器会阻止 file URL 中的 ES 模块,因此请使用本地 Web 服务器。从 CDN 获取软件包与将分子输入发送到 chematic.io 是不同的事情。