Webpack 将编译后的打字稿输出为（javascript）字符串答案

【问题标题】：Webpack output compiled typescript as (javascript) stringWebpack 将编译后的打字稿输出为（javascript）字符串
【发布时间】：2016-06-21 08:33:11
【问题描述】：

有谁知道如何将编译后的打字稿输出为可以使用 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);
}
]);

【问题讨论】：

您是否尝试将目标设置为node。
@SeanLarkin 将设置 target = node 放在哪里？
它是配置中的顶级属性

标签： node.js typescript webpack ts-loader

【解决方案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;';
};

【讨论】：