如何在Understrap子主题中从NPM导入JavaScript库

既然已经通过npm安装了Chart.js依赖，不用手动复制chart.umd.js文件，直接借助Understrap的构建流程把它打包到主题的编译脚本里就行，完全避开node_modules引用和CDN风险，步骤如下：

1. 确认依赖安装 #

先执行命令确保Chart.js已经安装到位：

npm install

2. 在主题入口脚本中导入Chart.js #

找到你子主题的JS入口文件（通常是/src/js/theme.js），在文件顶部导入Chart.js的UMD模块，同时把它挂载到全局window对象，方便在页面其他脚本中调用：

// 导入Chart.js的UMD版本
import Chart from 'chart.js/dist/chart.umd.js';

// 挂载到全局window，避免作用域问题
window.Chart = Chart;

3. 执行主题构建命令 #

运行Understrap的构建命令，把Chart.js打包到输出的脚本文件中：

• 开发环境（带热重载）：

npm run dev

• 生产环境（压缩优化）：

npm run build

构建完成后，Chart.js的代码会被合并到/dist/js/theme.min.js（或对应输出路径）中。

4. 在functions.php中注册编译后的脚本 #

打开子主题的functions.php，替换原来的CDN脚本引用，改为加载本地编译后的主题脚本：

function understrap_child_enqueue_assets() {
    // 取消原来的CDN Chart.js引用（如果之前加过）
    // wp_dequeue_script('chart-js-cdn');

    // 加载本地编译后的主题脚本，包含Chart.js
    wp_enqueue_script(
        'child-theme-main-script',
        get_stylesheet_directory_uri() . '/dist/js/theme.min.js',
        array('jquery'), // 依赖jQuery，根据需要调整
        wp_get_theme()->get('Version'),
        true // 放在页脚加载，优化性能
    );
}
add_action('wp_enqueue_scripts', 'understrap_child_enqueue_assets');

5. 测试功能 #

在页面中添加canvas元素和测试代码，验证Chart.js是否正常工作：

<canvas id="myChart" width="400" height="400"></canvas>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
});
</script>

注意事项 #

• 如果你的Understrap子主题用的是Gulp构建而非Webpack，调整思路一致：修改Gulp的JS任务配置，确保入口脚本中导入的Chart.js被打包到输出文件。
• 全程不需要手动复制chart.umd.js到主题目录，构建工具会自动处理依赖打包。

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