Web_Designer_UK__May_2018

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