Webpack輸出編譯打字稿爲（javascript）字符串

有誰知道如何將編譯後的打字稿輸出爲可以使用Extract-Text-Webpack-Plugin提取的字符串？Webpack輸出編譯打字稿爲（javascript）字符串

目前我使用「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" 
    ] 
}

打字稿文件：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); 
} 
]);

來源

2016-06-21 Michael Yuan

您是否嘗試過將節點設置爲'node'。 –

@SeanLarkin在哪裏把設置目標=節點？ –

它是配置中的頂級屬性 –

你可以通過使用定製的裝載機實現這一目標

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

來源

2016-06-25 03:22:20 mind1n

Webpack輸出編譯打字稿爲（javascript）字符串

回答

相關問題