2017-04-18 73 views
19

Próbuję użyć eksport i import, ale to nie działa pojawia się błądmaszynopis eksport nie jest zdefiniowana

Oto mój kod HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
    @RenderBody() 

    <script src="~/scripts/user.js"></script> 
    <script src="~/scripts/main.js"></script> 
</body> 
</html> 

User.ts:

export class User { 
    firstName: string; 
    lastName: string; 
} 

main.ts

import { User } from "./user"; 

Tutaj jest również zrzut ekranu z wyjątkiem:

enter image description here

Odpowiedz

13

Masz kilka opcji:

Wariant 1: użyć ładowarka moduł jak Webpack, Browserify itp

Opcja 2: Jeśli chcesz tylko skompilować *.ts do *.js bez modułu importu lub eksportuj, ustaw compilerOptions.module na "none" w twoim tsconfig.json. Zauważ, że nie będziesz w stanie eksportować/importować modułów, gdy ustawisz compilerOptions.module na "none".

+1

Czy mogę używać pakietu WebPack w ASP.NET? – Js0n

+0

Możesz. O wiele łatwiej z ASP.NET Core teraz. W Internecie jest mnóstwo przykładów. – Saravana

+2

lub po prostu użyj referencji, niż działa bez modułu ładującego i jako commonjs, a nie chcesz załadować setek plików js w swoim html, tak myślę, więc wypisz tylko plik 1 js – TypedSource

2

maszynopis domyślnie używa rozdzielczość modułu węzeł. Node.js/CommonJS używa słowa kluczowego eksportuje. Jednak CommonJS nie działa w przeglądarce bez modułu ładującego moduł lub bundler modułu. W związku z tym potrzebujesz przeglądarki lub webpada, aby uruchomić ją w przeglądarce.

Wyjazd ten link https://www.typescriptlang.org/docs/handbook/gulp.html

Można również ustawić modułu ustawienie na równych w opcji kompilatora sekcja w tsconfig.json:

{ "compilerOptions": { „target ":" es5 ", " moduł ":" brak " } }

+1

to nie jest poprawne. uruchamiam CommonJS w mojej przeglądarce bez żadnych problemów. nie można używać eksportu i importu w przeglądarce bez modułu ładującego moduły, to jest poprawne. – TypedSource

+0

Masz rację, poprawiłem moją odpowiedź, by było bardziej jednoznaczne. Potrzebujesz modułu ładującego moduły lub bundlera modułów, aby CommonJS działał w przeglądarce. Dzięki. – Ibro

7

spróbować dodaje zmienia

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
    @RenderBody() 

    <!-- <script src="~/scripts/user.js"></script> --> <!-- not longer needed --> 
    <script src="~/scripts/main.js"></script> 
</body> 
</html> 

tsconfig.json

{ 
    "compilerOptions": { 
    "module": "commonjs", 
    "target": "es5", 
    "sourceMap": true, 
    "outFile": "~/scripts/main.js", 
    "lib": [ 
     "dom", 
     "es2015", 
     "es5", 
     "es6" 
    ] 
    } 
} 

z tym config Twój wyjście jest tylko jeden plik js co można uglified wunderfull, zawierający wszystkie odniesienia pliki w main.ts. po prostu nie wiem, czy ~/działa lub jeśli musisz ustawić ścieżkę względem pliku konfiguracyjnego, nie pracuję z linuxem.

User.ts

class User { 
    firstName: string; 
    lastName: string; 
} 

głównego.TS:

/// <reference path="User.ts" /> 

// import { User } from "./user"; // not needed if referenced 
console.log(new User()); 

wszystkie deklaracje referencyjne muszą być napisane na początku pliku

+2

Wow, szukałem importuj a referencje już za dużo godzin, dziękuję bardzo! To było przyczyną mojego problemu. – joe

+2

Ta odpowiedź nie działa dla mnie, pojawia się ten problem: https://stackoverflow.com/questions/35963346/only-amd-and-system-modules-jest-supported-alongside-out –

+0

@NickCoad wygląda jak problem z VisualStudio, używam Atom, PHPStorm i IntelliJ i wszystko działa dobrze. – TypedSource

Powiązane problemy