Webpack output compiled typescript as (javascript) string

Question

Does anyone know how to output compiled typescript as string which can be extracted using the Extract-Text-Webpack-Plugin?

Currently I use "ts-loader" to transform the TypeScript file into JavaScript file. However, the result is not as expected because the output JavaScript is integrated with the Js which will be executed by NodeJs.

The expected result is to compile the TypeScript content into a JavaScript string just like what Css loader does so I can use Extract-Text-WebPack-Plugin to render the compiled Javascript content into the output file (a bundled js file which will be used as a browser side javascript library).

Not sure which webpack plugin / loader is able to solve this problem?

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 File: test.ts

class FirstType{
    firstProp: "ok";
}

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

Expected Result: test.bundle.js

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

Unwanted Actual Result: 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);
}
]);

Have you tried setting your target to node.

Sean Larkin
– Sean Larkin

2016-06-21 12:24:49 +00:00
Commented Jun 21, 2016 at 12:24 — Sean Larkin
– Sean Larkin, Commented Jun 21, 2016 at 12:24
@SeanLarkin where to put the setting target = node?

Mark Yuan
– Mark Yuan

2016-06-21 13:11:43 +00:00
Commented Jun 21, 2016 at 13:11 — Mark Yuan
– Mark Yuan, Commented Jun 21, 2016 at 13:11
it is a top level property in the configuration

Sean Larkin
– Sean Larkin

2016-06-22 14:12:04 +00:00
Commented Jun 22, 2016 at 14:12 — Sean Larkin
– Sean Larkin, Commented Jun 22, 2016 at 14:12

mind1n · Accepted Answer · 2016-06-25 03:22:20Z

1

You can achieve that by using a customized loader.

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;';
};

answered Jun 25, 2016 at 3:22

mind1n

1,2063 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack output compiled typescript as (javascript) string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related