I am trying to build a frontend, there is no experience at all, so don’t scold if that) I use TypeScript, JSX. connected React. I collect using Webpack.

build.js

var path = require("path"); var webpack = require("webpack"); var config = { context: path.join(__dirname, '/app/Account'), entry: './login.js', output: { path: path.join(__dirname, 'out') }, module: { loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }] } } var compiler = webpack(config); compiler.run(function (err, stats) { console.log(stats); if (err) console.log(err); });

.babelrc

 { "presets": [ "es2015" ] }

tsconfig.json

 { "compileOnSave": true, "compilerOptions": { "module": "umd", "target": "es5", "jsx": "react" } }

At the same time in the browser we see the following:

browser

That is, the transformation into a clear browser code did not occur. What am I doing wrong?

Just in case, the structure of the project, you never know, something stumbled:

enter image description here

    2 answers 2

    jsx , this is in javascript , but you use typescript for which tsx and for which you do not need the babel compiler and .babelrc , except in cases where you want to compile the generator and Symbol in es5 .

    therefore, all you need is to install and connect typescript-loader .

    ps I want to emphasize that babel and .babelrc will not harm if you leave them, but do not wake them up.

      Eh, and the problem was not even in Babel. A little fiddling, I started to run everything in manual mode through the console. The webpack --display-error-details command helped a webpack --display-error-details (as it turned out when launching build.js, errors for some reason were not output, which made me think that everything is in order).

      Well and there on a trifle, there was no preset file for babel, npm install babel-preset-es2015 .

      Well, actually the cause of all the suffering in the tsx file was an error. The screenshot shows this. it was necessary to specify the name of the module in the import "./welcome" instead of "welcome", as I did. Eh WebStorm, I got through this ...)