即使在尝试了不同的方法之后,我在本地开发环境中使用 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>
要解决您遇到的问题:
使用启用了 CORS 的本地文件:
<script src="path/to/glpk.min.js"></script>
更改 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 模块并以正确的方式初始化它。