“未捕获的引用错误:glpk 未定义”,即使在本地加载后

问题描述 投票:0回答:1

即使在尝试了不同的方法之后,我在本地开发环境中使用 GLPK.js 也遇到了困难。

以下是我面临的问题:

方法一:本地文件导入( import GLPK from '../dist/index.js';)

我无法从本地文件将 GLPK.js 作为模块导入。

控制台的错误是:

从源“null”访问“file:///C:/Users/luiza/Documents/Documentos/PO/jogos/meu_jogo/glpk.min.js”处的脚本已被 CORS 策略阻止:跨源请求仅支持协议方案:http、data、isolated-app、chrome-extension、chrome、https、chrome-untrusted。

方法 2:CDN 导入(从 'https://cdn.jsdelivr.net/npm/[email protected]/dist/glpk.min.js' 导入 GLPK;)

当我尝试从 CDN 导入 GLPK.js 作为模块时,我收到了不同的错误:

未捕获的语法错误:请求的模块“https://cdn.jsdelivr.net/npm/[email protected]/dist/glpk.min.js”不提供名为“default”的导出(在 teste.html 中: 6:16)

使用的代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>Optimal Transportation Problem with GLPK.js</title>
    <script type="module">
        import GLPK from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/glpk.min.js';
        (async () => {

            const glpk = await GLPK();

            function print(res) {
                const el = window.document.getElementById('out');
                el.innerHTML = `Solution: Transportation Problem\n\n ${JSON.stringify(res, null, 2)}`;
            };

            // Definindo o problema de transporte
            const supply = [20, 30, 25]; // Fornecimento de cada fornecedor
            const demand = [10, 25, 20, 20]; // Demanda de cada consumidor

            // Custos de transporte
            const costs = [
                [8, 6, 10, 9],  // Custos do fornecedor 1
                [9, 12, 13, 7], // Custos do fornecedor 2
                [14, 9, 16, 5]  // Custos do fornecedor 3
            ];

            const numSuppliers = supply.length;
            const numConsumers = demand.length;

            // Variáveis de decisão e a função objetivo
            let variables = [];
            for (let i = 0; i < numSuppliers; i++) {
                for (let j = 0; j < numConsumers; j++) {
                    variables.push({ name: `x_${i}_${j}`, coef: costs[i][j] });
                }
            }

            // Restrições de fornecimento
            let constraints = [];
            for (let i = 0; i < numSuppliers; i++) {
                let vars = [];
                for (let j = 0; j < numConsumers; j++) {
                    vars.push({ name: `x_${i}_${j}`, coef: 1 });
                }
                constraints.push({ name: `supply_${i}`, vars: vars, bnds: { type: glpk.GLP_FX, ub: supply[i], lb: supply[i] } });
            }

            // Restrições de demanda
            for (let j = 0; j < numConsumers; j++) {
                let vars = [];
                for (let i = 0; i < numSuppliers; i++) {
                    vars.push({ name: `x_${i}_${j}`, coef: 1 });
                }
                constraints.push({ name: `demand_${j}`, vars: vars, bnds: { type: glpk.GLP_FX, ub: demand[j], lb: demand[j] } });
            }

            // Configuração do problema
            const lp = {
                name: 'Transportation Problem',
                objective: {
                    direction: glpk.GLP_MIN,
                    name: 'obj',
                    vars: variables
                },
                subjectTo: constraints
            };

            const opt = {
                msglev: glpk.GLP_MSG_OFF
            };

            // Resolver o problema usando GLPK.js
            const solution = await glpk.solve(lp, opt);
            print(solution);

            console.log(await glpk.solve(lp, glpk.GLP_MSG_DBG));

            window.document.getElementById('cplex').innerHTML = await glpk.write(lp);

        })();
    </script>
</head>
<body>
    <h1>Optimal Transportation Problem with GLPK.js</h1>
    <pre id='cplex'></pre>
    <pre id='out'></pre>
</body>
</html>
javascript html glpk
1个回答
0
投票

要解决您遇到的问题:

  1. 使用启用了 CORS 的本地文件:

    <script src="path/to/glpk.min.js"></script>
    
  2. 更改 CDN 导入:

    <script type="module">
        import initGLPK from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/glpk.min.js';
        (async () => {
            const glpk = await initGLPK();
            // code is here
        })();
    </script>
    

这应该正确加载 GLPK 模块并以正确的方式初始化它。

© www.soinside.com 2019 - 2024. All rights reserved.