reactjs - Webpack + React + Typescript -


is possible use webpack react , typescript , able bundle web bundle, still able debug original typescript , react code? in webpack i'm using ts-loader , ts-jsx-loader plus devtool: "source-map", when try browser debugging, can't see original ts code instead see code has been changed webpack.

my current basic webpack.config.js file:

var webpack = require('webpack'); module.exports = {   entry: ['./app/main.ts'],   output: {     path: './build',     filename: 'bundle.js'   },   debug: true,   devtool: 'source-map',   plugins: [     new webpack.optimize.dedupeplugin(),     new webpack.optimize.uglifyjsplugin()   ],   resolve: {     extensions: ['', '.ts', '.js']   },   module: {     loaders: [       {         test: /\.ts$/,         loader: 'ts-loader!ts-jsx-loader'       }     ]   } };

tsconfig.json:

{     "compileonsave": false,     "version": "1.5.0-alpha",     "compileroptions": {         "target": "es5",         "module": "commonjs",         "nolib": false,         "sourcemap": true,         "noimplicitany": true,         "removecomments": true     },     "files": [         "./appcomponent.ts",         "./libs/jsx.d.ts",         "./libs/react.d.ts",         "./libs/webpack-runtime.d.ts",         "./main.ts"     ] }

for example - oryginal .ts file looks like:

import react = require('react');  class appcomponent extends react.component<any, any> {   render () {     return react.jsx(`       <h1>he world!</h1>     `);   } }; export = appcomponent;

and in chrome debugger looks this:

var __extends = this.__extends || function (d, b) {     (var p in b) if (b.hasownproperty(p)) d[p] = b[p];     function __() { this.constructor = d; }     __.prototype = b.prototype;     d.prototype = new __(); }; var react = __webpack_require__(2); var appcomponent = (function (_super) {     __extends(appcomponent, _super);     function appcomponent() {         _super.apply(this, arguments);     }     appcomponent.prototype.render = function () {         return (react.createelement("h1", null, "he world!"));     };     return appcomponent; })(react.component); ; module.exports = appcomponent;   /*****************  ** webpack footer  ** ./app/appcomponent.ts  ** module id = 158  ** module chunks = 0  **/

you don't need use ts-jsx-loader.

in tsconfig.json file need this:

{   "compileroptions": {     "jsx": "react",     "sourcemap": true,     // ... other options   } }

and of course, still need devtool option in webpack config file


Comments

Post a Comment

Popular posts from this blog

searchKeyword not working in AngularJS filter -

i writing app using angularjs on front end. want search through table word/field; 1 search box everything. according article here: http://hello-angularjs.appspot.com/searchtable can use filter: searchkeyword this. this code, , not working expected. <label>search: <input ng-model="searchkeyword"></label> <table ng-repeat="post in posts | orderby: sort | filter: searchkeyword"> <tr> <td> {{index(post)}} </td> <td> {{post.title}} </td> <td> {{post.author}} </td> <td> {{post.content}} </td> <td> {{post.date | date: "d/m/yyyy"}} </td> </tr> </table> what should do? thank you try this: controller $scope.posts = [ {title:'title one', author:'author one', content: 'content one'}, {title:'title two', author:'author two', content: 'cont...
Read more

sequelize.js - Sequelize: sort by enum cases -

i have model ( article ) field (the name type ) of type enum('source', 'translated') , return 1 article ordered type field. source articles should returned before translated articles. like: article.findone(order: [ { type: [ 'source', 'translated' ] } ]); unfortunately there appears no built-in solution sorting enums. instead have sort by case , couldn't find documentation on how sequelize. what conventional approach here? sorting case hard in sequelize, sort field (the second answer in linked post) should possible: order: sequelize.fn('field', sequelize.col('type'), 'source', 'translated') it's supported mysql far know though
Read more

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

i trying use following code create interactive gui changes color-space(hsv, rbg, grayscale etc) on event of button click. display opencv video in tkinter using multiprocessing being new python having problems multiprocessing , attempts on making gui change it's color space on button clicks hangs entire system. on it's implementation highly appreciated. thankyou. below code: import cv2 pil import image,imagetk import tkinter tk import numpy np multiprocessing import process , queue def quit_it(root,process): root.destroy() process.terminate() def black_andwhite(root,process): process.terminate p=process(target=capture_image, args=(5,queue, )) p.start() root.after(0, func=lambda: update_all(root, image_label, queue)) def update_image(image_label, queue): frame = queue.get() = image.fromarray(frame) b = imagetk.photoimage(image=a) image_label.configure(image=b) image_label._image_cache = b root.update() def update_all(root...
Read more