Как настроить/использовать модули для typescript?

Question

[historydev]

Добрый вечер. Я в отчаянии!

Скажите пожалуйста почему выскакивает это, у меня уже аллергия на эту надпись, ночь сидел вчера и сегодня продолжаю...

Код до компиляции:

TS - file2:

//Initialize canvas
let canvas: any;
canvas = document.getElementById('scene');

//Initialize engine
let engine: any;
engine = new BABYLON.Engine(canvas, true);

let createScene: any;
createScene = function () { ... }

export default {
    createScene,
    engine
}

TS - file1:

import createScene from './modules/scene';
import engine from './modules/scene';

//Listener for document wait download
window.addEventListener('DOMContentLoaded', function() {

    //Initialize scene
    let firstScene: any;
    firstScene = createScene;

    engine.runRenderLoop(function() {
        firstScene.render();
    });

    window.addEventListener('resize', function() {
        engine.resize();
    });


});

После компиляции:

JS - file2:

exports["default"] = {
    createScene: createScene,
    engine: engine
};

JS - file1:

"use strict";
exports.__esModule = true;
var scene_1 = require("./modules/scene");
var scene_2 = require("./modules/scene");
//Listener for document wait download
window.addEventListener('DOMContentLoaded', function () {
    //Initialize scene
    var firstScene;
    firstScene = scene_1["default"];
    scene_2["default"].runRenderLoop(function () {
        firstScene.render();
    });
    window.addEventListener('resize', function () {
        scene_2["default"].resize();
    });
});

Я уже не знаю что делать, код из документации не работает! Капец какой-то!

Спасибо огромное.

UPD: Убирал commonjs из tsconfig, подключал вебпак, пробовал несколько вариаций импорта/экспорта, короче слово на Ж

Comments

[Антон Швец]

вы привели два js файла, а ошибка у вас в неизвестном нам app.js
В этих js все в порядке, но вы даже способ сборки не указали.

короче
Информации в вопросе недостаточно для исчерпывающего ответа.

[historydev]

Антон Швец, app.js - file1.

Answer 1

[profesor08]

Ну так сделай нормальный конфиг вебпака, чтоб он компилировал в обычный js. Либо подключай скрипт к странице как модуль. И то, и то, есть в документации. Изучай. Если лень, то ...

Answer 2

[abberati]

Попробуй parcel, это сборщик, который работает сразу, без конфигурации.

Answer 3

[Антон Швец]

Простейший конфиг webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

исходники должны лежать в папке src, стартовый файл index.ts
сборка webpack --mode=production
разработка с hmr

webpack-dev-server --mode development --inline --hot

зависимости (версии уже надо обновить наверно)

"devDependencies": {
    "css-loader": "^3.0.0",
    "ts-loader": "^6.0.4",
    "tslint": "^5.18.0",
    "tslint-config-airbnb": "^5.11.1",
    "typescript": "^3.5.2",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  }

tsconfig.json (думаю не очень хороший, но рабочий)

{
  "compilerOptions": {
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "incremental": true,
    "module": "es6",
    "noImplicitAny": false,
    "outDir": "./dist/",
    "sourceMap": true,
    "target": "es2016"
  }
}

tslint.json - правила для линтера

{
  "extends": "tslint-config-airbnb",
  "rules": {}
}

в html
<script src="dist/bundle.js"></script>