Question

我使用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的任何提示或其他现成的解决方案

如何使用Gulp和导入/导出语句（ts模块）编译Typescript

0 个答案: