Webpack 将编译后的打字稿输出为 (javascript) 字符串

Question

有谁知道如何将编译后的打字稿输出为可以使用 Extract-Text-Webpack-Plugin 提取的字符串？

目前我使用 "ts-loader" 将 TypeScript 文件转换为 JavaScript 文件。然而，结果并不如预期，因为输出 JavaScript 与将由 NodeJs 执行的 Js 集成。

预期的结果是将 TypeScript 内容编译成 JavaScript 字符串，就像 Css 加载程序所做的那样，因此我可以使用 Extract-Text-WebPack-Plugin 来呈现编译后的 Javascript 内容到输出文件（一个捆绑的 js 文件，将用作浏览器端 javascript 库）。

不确定哪个 webpack 插件/加载器能够解决这个问题？

webpack.config.js

var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var exCss = new ExtractTextPlugin('[name].bundle.css');
var exScss = new ExtractTextPlugin('[name].bundle.css');


module.exports = {
    entry: {
        entry:"./src/entry.js"
    },
    devtool: "source-map",
    output: {
        path: __dirname + "/bundle",
        publicPath: "/assets/",
        filename: "[name].bundle.js"
    },
    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.jsx']
    },
    module: {
        loaders: [
            { test:/\.ts$/, loader: "ts-loader" },
            { test: /\.css$/, loader: exCss.extract(["css"]) }
        ]
    },
    plugins: [exScss, exCss]
};

tsconfig.json

    {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings"
  ]
}

TypeScript 文件：test.ts

class FirstType{
    firstProp: "ok";
}

let obj = new FirstType();
console.log(obj.firstProp);

预期结果：test.bundle.js

"use strict";
var FirstType = (function () {
    function FirstType() {
        this.firstProp = "ok";
    }
    return FirstType;
}());
var obj = new FirstType();
console.log(obj.firstProp);

不需要的实际结果：test.bundle.js

/******/ (function(modules) { // webpackBootstrap

......

function(module, exports) {

    "use strict";
    var FirstType = (function () {
        function FirstType() {
            this.firstProp = "ok";
        }
        return FirstType;
    }());
    var obj = new FirstType();
    console.log(obj.firstProp);
}
]);

Answer 1

您可以通过使用自定义加载器来实现。

module.exports = function(source){
    var src = source;
    src = src.replace(/\/ig, "\\");
    src = src.replace(/\'/ig, "\'");
    src = src.replace(/\"/ig, "\\"");
    src = src.replace(/\r/ig, "\r");
    src = src.replace(/\n/ig, "\n");
    return 'var content = "'+src+'";module.exports = content;';
};

Webpack 将编译后的打字稿输出为 (javascript) 字符串

Webpack output compiled typescript as (javascript) string

node.js

typescript

webpack

ts-loader