Как запустить простой проект, созданный с помощью пряжи - PullRequest
Новая
       11

Как запустить простой проект, созданный с помощью пряжи

0 голосов
/ 18 апреля 2019

Я разработчик Angular / Typescript, но не очень разбираюсь в инструментах веб-сборки.Я столкнулся с ситуацией, в которой я хотел бы построить простой проект в Typescript, используя пряжу, чтобы предоставить мне некоторые зависимости (другими словами, без использования Angular CLI или CLI другого фреймворка).Я планировал написать простой файл Typescript, содержащий некоторый код, используя библиотеку, добавленную в проект с помощью пряжи, перенести этот файл и включить его в простую HTML-страницу.Чтобы убедиться, что все модули правильно указаны в передаваемом коде, я бы использовал webpack для создания пакета.Простая HTML-страница, на которой отображаются результаты скрипта, будет index.html, обслуживаемым webpack-dev-server, а затем, естественно (разработчиком на Angular).

Это означает, что когда я хочу построить свой проект, я 'm запускает в командной строке следующие команды, где файл editionewithturf.ts предназначен для использования в качестве файла кода точки входа для моего проекта: 

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

Основной файл Typescript issewithturf.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)}'`);

Это index.html, который обслуживает webpack-dev-server: 

<!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 в каталог моего проекта и добавил пакет requirejs с пряжей)

Теперь я не знаю, что я делаю неправильно или отсутствует в этом рабочем процессе, но когда я перехожу к URL-адресу webpack-dev-Сервер указывает, что единственное, что я получаю в своей консоли, - это следующая ошибка (в Firefox): 

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

Для вашего удобства вот что передал содержимое файла editionewithturf.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) + "'");

Я действительно в растерянности и буду очень признателен, если кто-нибудь сможет объяснить, что я делаю не так.

Заранее спасибо, Джошуа

1 Ответ

0 голосов
/ 18 апреля 2019

Я был быстро, чтобы отправить этот вопрос.Проблема заключалась просто в том, что я ссылался не на пакет, сгенерированный Webpack, а только на транспонированную версию моего скрипта в файле index.html.

...