Как отдельно скомпилировать TypeScript исполняемый скрипт?

Question

Вилен

webpack , typescript , vue

Как отдельно скомпилировать TypeScript исполняемый скрипт?

Привет! Мне нужен исполняемый скрипт с серверным рендерингом (SSR) Vue. Весь проект написан на TypeScript. Я попытался создать похожий скрипт, но при компиляции tsc возникают проблемы. Есть ли другие варианты решения этой проблемы? Я пытаюсь создать серверный скрипт для выполнения его в консоли с помощью команды node server.js. Вот пример ошибки, которую я получаю от tsc: 

"Cannot find module './App.vue' or its corresponding type declarations."
import App from './App.vue'

12 октября 2023 г. 9:08

Ответы на вопрос 2

Похожие вопросы

Answer 1

Привет! Для того чтобы отдельно скомпилировать TypeScript исполняемый скрипт с серверным рендерингом Vue, вам нужно выполнить несколько шагов:

1. Установите TypeScript в ваш проект, если вы еще не сделали это:

```
npm install --save-dev typescript
```

2. Создайте файл `tsconfig.json` в корневой директории вашего проекта и укажите в нем настройки компиляции TypeScript. Например:

```json
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src/**/*.ts" // укажите путь к вашим TypeScript файлам
  ],
  "exclude": [
    "node_modules"
  ]
}
```

3. Создайте файл `server.ts` с вашим серверным кодом и серверным рендерингом Vue. Например:

```typescript
import { createServer } from 'http';
import { renderToString } from '@vue/server-renderer';
import { createApp } from './App.vue'; // укажите путь к вашему файлу приложения Vue

const server = createServer((req, res) => {
  const app = createApp();
  
  renderToString(app).then(html => {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(html);
  });
});

server.listen(3000, () => {
  console.log('Server is listening on port 3000!');
});
```

4. Выполните компиляцию TypeScript с помощью команды:

```
npx tsc
```

5. Запустите скомпилированный файл `server.js` с помощью команды:

```
node dist/server.js
```

Вам также необходимо убедиться, что все зависимости установлены корректно и что у вас есть файл `App.vue` и его соответствующие типы объявлены. Если вы все еще получаете ошибку "Cannot find module './App.vue' or its corresponding type declarations", проверьте правильность пути к файлу `App.vue` и установку соответствующих зависимостей.

Удачи с вашим серверным рендерингом Vue на TypeScript!

Answer 2

tsc компилирует только файлы TypeScript (.ts) в JavaScript (.js) и ничего более. Он также может компилировать файлы TypeScript с расширением .tsx. Однако, для сборки проекта на Vue.js требуется использовать сборщик, такой как Webpack, указанный в HTML-тегах. Также можно использовать сборщики, такие как Vite или Rollup, в зависимости от предпочтений.