8 months ago


Developer tutorials

Developer tutorials Deploy TypeScript with React Below Thanks to the use of the ‘./’ syntax, the ‘config’ file can sit above the source folders “target”: “es5”, “jsx”: “react” }, “include”: [ “./src/**/*” ]} 6. Understand the structure Oneinterestingaspectofthe‘tsconfig’fileinvolvesthe useof‘./.’Asingledotrepresentsthelocalfolder,while.. representsthefolder‘above’thecurrentone.Inourcase, ‘./dist/’pointsatthedistfolderbelowthelocationofthe configuration file. 7. Configure webpack Asworkstationsage,yourNode.JSconfigcangetmessed up.Thisisparticularlyproblematicforwebpack:ifthe productcan’tberunfromyourshell,installitagainlocally. Next,usethenpmbintofindthefoldercontainingit,and invokeitfromtheretogettheerrormessageshown accompanying this step. 8. Get configuring Createafilecalled‘webpack.config.js’intherootfolderof the current project. Next, replace its contents with the onesshownaccompanyingthisstep–wewilldiscuss relevantpartsoftheconfigurationfilenext. module.exports = { entry: “./src/index.tsx”, output: { filename: “bundle.js”, path: __dirname + “/dist” }, devtool: “source-map”, resolve: { extensions: [“.ts”, “.tsx”, “.js”, “. json”] }, module: { rules: [ { test: /\.tsx?$/, loader: “awesometypescript-loader” }, { enforce: “pre”, test: /\.js$/, loader: “source-map-loader” } ] }, externals: { “react”: “React”, “react-dom”: “ReactDOM” }, }; 9. Do the module! webpack’s packaging process can be expanded by loading so-called modules. Think of them like expansion projects for XNA’s legendary content pipeline. In our case, both JS and TS files are declared to be processable. 10. Externalise stuff Bundling large libraries into your webpack output is not sensible because browser caching and CDNs get disabled. Using the externals module allows you to mark parts of the codebase as ‘foreign’, which changes the mode used for their inclusion. Even more options! The‘AwesomeTypeScriptLoader’canbe consideredtheSwissArmyknifeofTypeScript– look at its options described at https://github. com/s-panferov/awesome-typescript-loader to adjust its behaviour even further. Above Index.htm must stand outside of the ‘/src’ folder and its contents Top If webpack cannot be found, re-install it and run it from the npm bin folder Bottom Microsoft’s preferred arrangement does not work with recent versions of webpack 88 _________________________________________________tutorial

Developer tutorials Deploy TypeScript with React Analyse your options Ourdiscussionof tsconfig.json is relatively superficial in scope. The limited space in the magazine does not allow us to go into depth. TypeScript comes with literally dozens of options, most of which are documented in the portal accessible at https:// www.typescriptlang. org/docs/handbook/ tsconfig-json.html. Keep in mind that the ‘root’ webpage does not list all options. Instead, click the Project Configuration node at the left-hand side of the screen to reveal further parameters and fields which might be of interest. Finally, be aware that some of the options require the presence of Visual Studio – Microsoft, after all, wants to push its own IDE. 11. Create an entry point The next step involves the creation of an application entry point using the structure shown accompanying this step. We simply load a bunch of predefined resources and place the file outside of the ‘/src/’ folder in accordance with the tree output below. 12. Create a TypeScript file Displaying information in TypeScript is relatively simple. Due to the inclusion of React, ‘index.tsx’ – to be placed in ‘/src/’ – requires some additional code to include various modules. import * as React from “react”; import * as ReactDOM from “react-dom”; ReactDOM.render( Hello, world!, document.getElementById(“example”) ); 13. Take a stab At this point, it is time to try and compile the project for the first time. If you followed Microsoft’s instructions carefully, the error shown in the figure will pop up. Fortunately, the problem can be fixed by adjusting the folder structure (see figure). 14. Pack it again! With that out of the way, adjust the path for calling webpack and take another stab at the compilation process. It will pass, yielding output similar to the one shown in the listing accompanying this step. tamhan@TAMHAN14:~/tsreactspace$ /home/ tamhan/tsreactspace/node_modules/.bin/ webpack . . . Asset Size Chunks Chunk Names bundle.js 2.95 kB 0 [emitted] main 3.19 kB 0 [emitted] main [0] ./src/index.tsx 252 bytes {0} [built] + 2 hidden modules 15. Say hello With that out of the way, it is time to open ‘index.htm’. The browser will load the page, and will present our simple, React-based greeting to the world. When distributing the finished application, make sure to include the ‘dist’ folder. 16. Use source mapping One frequent criticism of TypeScript is that debugging it is tiresome. Browsers, after all, cannot run TypeScript directly. This problem is thankfully mitigated via Map files such as ‘’. They contain a data structure which permits correlation between the output and the source files. 17. Celebrate the map file While many browsers demand the manual loading of the map file, using our webpack output with Firefox leads to the output shown in the figure. This is made possible by a comment at the bottom of ‘bundle.js’, which references tutorial _________________________________________________89