如何在无服务器环境下本地使用color-name-list JavaScript库？

因为本地静态环境无法使用Node的import语法，可通过以下两种方式直接在浏览器中运行该库：

方法1：使用UMD全局变量（兼容性更好） #

创建一个本地HTML文件，通过CDN引入库的UMD版本，此时库会将namedColors挂载为全局变量，直接调用即可：

<!DOCTYPE html>
<html>
<head>
    <title>Color Name Demo</title>
    <!-- 引入CDN的UMD版本资源 -->
    <script src="https://unpkg.com/color-name-list@latest/dist/color-name-list.js"></script>
</head>
<body>
    <script>
        const whiteColor = namedColors.find(color => color.hex === '#ffffff');
        console.log(whiteColor.name); // 输出: white

        const eigengrauColor = namedColors.find(color => color.name === 'Eigengrau');
        console.log(eigengrauColor.hex); // 输出: #16161d
    </script>
</body>
</html>

保存文件后，直接用浏览器打开该HTML文件即可，无需任何服务器或Node环境。

方法2：使用ES模块（现代浏览器支持） #

如果你的浏览器支持ES模块（绝大多数现代浏览器都支持），可以用type="module"的脚本标签直接从CDN导入：

<!DOCTYPE html>
<html>
<head>
    <title>Color Name Demo (ES Module)</title>
</head>
<body>
    <script type="module">
        // 从CDN导入ES模块版本
        import namedColors from 'https://cdn.jsdelivr.net/npm/color-name-list@latest/dist/color-name-list.esm.js';

        const whiteColor = namedColors.find(color => color.hex === '#ffffff');
        console.log(whiteColor.name); // 输出: white

        const eigengrauColor = namedColors.find(color => color.name === 'Eigengrau');
        console.log(eigengrauColor.hex); // 输出: #16161d
    </script>
</body>
</html>

同样，直接用浏览器打开该文件即可运行。

内容的提问来源于stack exchange，提问作者ewfewfjio