Views
3 months ago

Web_Designer_UK__May_2018

Developer tutorials

Developer tutorials Deploy TypeScript with React While TypeScript makes coding easier, deploying it with a framework can be a hassle. Here’s webpack to the rescue… 86 _________________________________________________tutorial DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner

Developer tutorials While TypeScript brings a variety of advantages to the arsenal of the JavaScript programmer, transpiling (and syntax-checking) large amounts of TS code in the browser is ineffective. Sadly, an old adage teaches us that manual processes tendtobreakdownovertime–ifeachandevery deployment takes a lot of console work, deployment frequency will take a hit. webpack’s automatic packing feature absorbs some of the heat so that when the pipeline is set up, transpilation is performed with minimal developer input. This, furthermore, frees up capacity for other tasks. In our example, the powerful React framework is integrated into the webpack compilation process via a group of helper utilities. React’s JSX syntax is augmented via a proprietary language called tsx, thereby enabling tighter integration between React and TypeScript’s advanced run-time checking. In short, working through this tutorial demonstrates the creation of a workflow combining the best of both worlds. Save time by using React’s logic, and avoid errors via the enhanced syntax. If you are not a bug, there is little not to like here. 1. Deploy webpack Seasoned Node.JS developers will not be surprised about thefactthattheuseofwebpackrequiresitsglobal installation via the npm ‘install -g’ command. When done, webpack can be invoked from your workstation’s command line. 2. Create the scaffolding structure Microsoft recommends the creation of a specific folder structure to contain the various files constituting our project. When working on an Ubuntu workstation, simply execute the command sequence shown in a convenient location. tamhan@TAMHAN14:~$ mkdir tsreactspace tamhan@TAMHAN14:~$ cd tsreactspace/ tamhan@TAMHAN14:~/tsreactspace$ mkdir src tamhan@TAMHAN14:~/tsreactspace$ cd src tamhan@TAMHAN14:~/tsreactspace/src$ mkdir components tamhan@TAMHAN14:~/tsreactspace/src$ cd .. 3. Create a Node.JS project As with all Node.JS-related programs, the next step involvesthecreationofarepositoryandtheloadingof the various dependencies that are needed. Simply enter the commands shown below to complete the creation of the structure. tamhan@TAMHAN14:~/tsreactspace/src$ npm init tamhan@TAMHAN14:~/tsreactspace/src$ npm install --save react react-dom @types/react @types/react-dom tamhan@TAMHAN14:~/tsreactspace/src$ npm install --save-dev typescript awesometypescript-loader source-map-loader 4. Automate your TypeScript process Most developers use TypeScript via the in-browser transpiler or an IDE. The capabilities of the tsconfig.json file are less known – it allows the pre-definition of a compiler toolchain. Create an empty file in root folder. 5. Populate the file In the next step, the TypeScript compilation process must be set up. Open the file created in step 4, and replace its contents with the ones shown accompanying this step. { “compilerOptions”: { “outDir”: “./dist/”, “sourceMap”: true, “noImplicitAny”: true, “module”: “commonjs”, Be awesome and keep Microsoft happy Authors of TypeScript examples like to substitute ‘awesome-typescript-loader’ with ‘ts-loader’. This is bad for two reasons. First of all, ‘awesome-*’ has better multithreading capabilities. Secondarily, Microsoft’s ‘official’ guidelines prefer ‘awesome-*’. Left NPM’s graphically verbose output showcases the colour capabilities of Ubuntu’s terminal emulator Above Once the package.js file is created, the rest takes place almost completely automatically tutorial _________________________________________________87