Как скомпилировать Typescript, используя Gulp и операторы import / export (модули ts) - PullRequest
Новая
       26

Как скомпилировать Typescript, используя Gulp и операторы import / export (модули ts)

0 голосов
/ 09 июля 2019

Я создаю свой проект с использованием Gulp и использую файлы машинописи в качестве модулей.Но я не могу скомпилировать инструкции импорта / экспорта.Я получаю неправильный файл js и стек ошибок в консоли браузера.

Я пробую пример с typescript.org/Gulp, но он не работает.Возможно, я что-то не так делаю.

код из tsconfig.json: 

{
    "files": [
        "src/js/index.ts",
        "src/js/slider.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es2015"
    }
}

gulpfile.js: 

const routes = {
    js: {
        dest: "dest/js/",
        build: "build/js/",
        watch: "src/js/**/*.ts"
    }
};

const prm = {
    browser: {
        server: "./dest",
        port: 3002
    }
    watch: {
        param: {
            ignoreInitial: false
        }
    }
};

const browser = require("browser-sync").create();
const {
    src,
    dest,
    series,
    parallel,
    watch
} = require("gulp");

function initBrowser(cb) {
    browser.init(prm.browser_build);
    cb();
}
function reload(cb) {
    browser.reload();
    cb();
}

function concat_js() {
    return browserify({
        basedir: '.',
        debug: true,
        entries: ['src/js/index.ts', 'src/js/slider.ts'],
        cache: {},
        packageCache: {}
    })
        .plugin(tsify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(dest(routes.js.dest));
}

exports.default = function() {
    browser.init(prm.browser);
    watch(routes.js.watch, prm.watch.param, series(concat_js, reload));
};

index.ts: 

import { Call } from "./slider";
function hello(compiler: string) {
    console.log(`Hello from ${compiler}`);
}
hello("TypeScript");
Call();

slider.ts: 

export function Call() {
    console.log("running");
}

код из bundle.js: 

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";

Object.defineProperty(exports, "__esModule", { value: true });
var slider_1 = require("./slider");
function hello(compiler) {
    console.log("Hello from " + compiler);
}
hello("TypeScript");
slider_1.Call();

},{"./slider":2}],2:[function(require,module,exports){
"use strict";

Object.defineProperty(exports, "__esModule", { value: true });
function Call() {
    console.log("running");
}
exports.Call = Call;

},{}]},{},[1,2])

//# sourceMappingURL=bundle.js.map

и из целевого index.js: 

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var slider_1 = require("./slider");
function hello(compiler) {
    console.log("Hello from " + compiler);
}
hello("TypeScript");
slider_1.default();

Кто-то может помочьменя с любыми подсказками или другими готовыми решениями, которые используют Gulp

...