혼동: es6 브라우저 모듈을 Typescript와 함께 사용하는 방법(모듈 번들러 없음)
es6 모듈로 타이프스크립트 코드를 정리하여 브라우저에 스크립트 타입="cript"로 직접 로드하고 싶습니다.서포트(https://caniuse.com/ #contract=es6-contract)를 확인했습니다.저는 크롬 버전 66을 사용합니다.
시도했지만 실패했고(아래 코드 참조), 올바른 전략이 무엇인지 혼란스럽습니다.
해결책 1 : app.ts 파일에서 외부 모듈을 Import해야 합니까?그런 다음 올바른 js 파일을 로드하려면 어떻게 해야 합니까?
해결책 2 : app.ts 파일에서 .js 코드를 직접 Import해야 합니까?단, .d.ts 파일을 참조해 체크인을 하는 방법은 무엇입니까?
어떤 도움이라도 주시면 대단히 감사하겠습니다.
=======================================================================
이것은 내가 시도했던 코드이다.
my index.html 파일
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<div id="app">
<img src="https://vuejs.org/images/logo.png" alt="Vue logo">
<h1>{{ msg }}</h1>
</div>
<script type="module" src="app.js"></script>
</body>
</html>
내 앱.ts 파일
//Solution 1
// import Vue from "vue"; // Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
//Solution 2
import Vue from "./Vendors/vue.esm.browser.js"; // It works in the browser but i have lost the definition inside Typescript file
var app = new Vue({
el: '#app',
data: {
msg: 'hello :)!'
}
});
tsconfig.json 파일
// tsconfig.json
{
"compilerOptions": {
"strict": true,
"target": "es6",
"module": "es6",
"moduleResolution": "node",
"allowJs": true
}
}
제 소포요.json 파일
{
"name": "vuejsbrowseresmodule",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.5.16"
}
}
며칠간의 연구 끝에 답을 찾았습니다.현재로서는 모듈 로더를 사용하지 않고는 타이프 스크립트를 사용할 수 없습니다.브라우저의 네이티브 로더에 대해 타이프스크립트에서는 많은 논의가 있습니다.
자세한 내용은 이쪽 =>
https://github.com/Microsoft/TypeScript/issues/16577 https://github.com/Microsoft/TypeScript/issues/13422
흥미로운 제안서 초안이 작성되었습니다.여기에서 확인하실 수 있습니다=>
https://github.com/domenic/package-name-maps
내가 해결책을 찾은 것 같아.
선언 파일(vue.d.ts)을 만듭니다.
써넣다
declare var vue: typeof import("vue/index")
다음으로 ts 코드에 글로벌 var가 있습니다.vue올바른 유형이 제공되고 이 파일은 브라우저에 표시되지 않으므로 브라우저의 js 코드는 글로벌하게 사용됩니다.vuecdn vue.filename 파일에서 가져옵니다.
면책사항:안 해봤어요vue, 와 함께 동작합니다.@type/bootstrap.
언급URL : https://stackoverflow.com/questions/50333892/confuse-how-to-use-es6-browser-module-withtypescript-without-module-bundler
'programing' 카테고리의 다른 글
| 두 div 요소 간의 vue2 전이 (0) | 2022.08.08 |
|---|---|
| Maven을 사용하여 종속성이 있는 실행 가능한 JAR을 작성하려면 어떻게 해야 합니까? (0) | 2022.08.08 |
| Vue v2.5.17에서 Vue-mapbox가 맵을 로드하지 않음 (0) | 2022.08.08 |
| 스프링 부트 - 데이터베이스 유형 NONE에 대한 내장형 데이터베이스 드라이버 클래스를 확인할 수 없습니다. (0) | 2022.08.07 |
| Vue SSR 응용 프로그램에서 Paper.js 사용 (0) | 2022.08.07 |