Question

我是Angular / Typescript开发人员，但对Web构建工具不是很有经验。我遇到过这样的情况，我想使用Typeric使用Typescript构建一个简单项目来提供一些依赖（换句话说，不使用Angular CLI或其他框架的CLI）。我的计划是使用一个添加到yarn的项目中的库编写一个包含一些代码的简单Typescript文件，转换该文件并将其包含在一个简单的HTML页面中。为了确保在转译的代码中正确引用了所有模块，我将使用webpack进行捆绑。显示脚本结果的简单HTML页面将是webpack-dev-server服务的index.html，然后自然而然（作为Angular开发人员）。

这意味着当我要构建项目时，我在命令行上运行以下命令，其中issuewithturf.ts应当是项目的入口点代码文件：

tsc ./issuewithturf.ts
webpack --mode development ./issuewithturf.js
webpack-dev-server --mode development ./issuewithturf.js

主要的Typescript文件issuewithturf.ts看起来像这样：

import { Feature, Polygon } from '@turf/helpers';
import { intersect as intersectTurf } from '@turf/turf';

let viewPolygon: Feature<Polygon> = {
    type: "Feature",
    properties: {},
    geometry: {
        type: "Polygon",
        coordinates: [[[ -70.47089614661226, -288.9575708753425 ], [ -89.01875849383576, -29.215166767389463 ], [ 87.55196076382538, 297.16069587534249 ], [ 89.87816973489422, 37.41829176738939 ], [ -70.47089614661226, -288.9575708753425 ]]]
    }
}

let areaPolygon: Feature<Polygon> = {
    type: "Feature",
    properties: {},
    geometry: {
        type: "Polygon",
        coordinates: [[[ 51.2898777767907,  4.268278231777 ], [ 51.289859436277, 4.2682590621057 ], [ 51.2898293706702, 4.26833214844409 ], [ 51.2898477111839, 4.26835131811539 ], [ 51.2898777767907, 4.268278231777 ]]]
    }
}

function intersect(polygon1: Feature<Polygon>, polygon2: Feature<Polygon>): number[][] | undefined {
    let intersection: Feature<any> | null = intersectTurf(polygon1, polygon2);
    if (intersection !== null && intersection.geometry !== null) {
        let coos: number[][] = intersection.geometry.coordinates[0];
        return coos;
    }
    return undefined;
}

console.log(`Intersection = '${intersect(viewPolygon, areaPolygon)}'`);

这是webpack-dev-server服务的index.html：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Issue with turf test</title>
    <script data-main="./issuewithturf.js" src="./require.js"></script>
  </head>
  <body>
    <h1>Look at the console</h1>
  </body>
</html>

（看着Typescript的转译文件，我以为我需要RequireJS，所以我在我的项目目录中添加了require.js并添加了带有yarn的package requirejs）

现在，我不知道我在此工作流程中做错了什么或丢失了什么，但是当我浏览URL时webpack-dev-server指示我在控制台中唯一遇到的是以下错误（在Firefox中）：

ReferenceError: exports is not defined (issuewithturf.js:2:1)

为方便起见，以下是转译文件issuewithturf.js的内容：

"use strict";
exports.__esModule = true;
var turf_1 = require("@turf/turf");
var viewPolygon = {
    type: "Feature",
    properties: {},
    geometry: {
        type: "Polygon",
        coordinates: [[[-70.47089614661226, -288.9575708753425], [-89.01875849383576, -29.215166767389463], [87.55196076382538, 297.16069587534249], [89.87816973489422, 37.41829176738939], [-70.47089614661226, -288.9575708753425]]]
    }
};
var areaPolygon = {
    type: "Feature",
    properties: {},
    geometry: {
        type: "Polygon",
        coordinates: [[[51.2898777767907, 4.268278231777], [51.289859436277, 4.2682590621057], [51.2898293706702, 4.26833214844409], [51.2898477111839, 4.26835131811539], [51.2898777767907, 4.268278231777]]]
    }
};
function intersect(polygon1, polygon2) {
    var intersection = turf_1.intersect(polygon1, polygon2);
    if (intersection !== null && intersection.geometry !== null) {
        var coos = intersection.geometry.coordinates[0];
        return coos;
    }
    return undefined;
}
console.log("Intersection = '" + intersect(viewPolygon, areaPolygon) + "'");

我真的很茫然，如果有人可以解释我在做什么错，我将不胜感激。

预先感谢，约书亚

Answer 1

我一直在快速发布此问题。问题只是因为我没有引用Webpack生成的捆绑软件，而是引用了index.html文件中脚本的转译版本。

如何运行用纱线创建的简单项目

1 个答案: