Сборка react webpack typescript

 "compilerOptions":  "outDir": "./dist", "target": "es5", "module": "es6", "jsx": "react", "noImplicitAny": true, "allowSyntheticDefaultImports": true > > 

const path = require('path'); module.exports =  mode: 'none', entry:  app: path.join(__dirname, 'src', 'index.tsx') >, target: 'web', resolve:  extensions: ['.ts', '.tsx', '.js'] >, module:  rules: [  test: /\.tsx?$/, use: 'ts-loader', exclude: '/node_modules/' > ], >, output:  filename: '[name].js', path: path.resolve(__dirname, 'dist') > > 

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(App />, document.querySelector('#root')); 

import React from 'react'; export default function App()  return h1>Hello, world!h1> > 

  lang="en">  charset="UTF-8">  name="viewport" content="width=device-width, initial-scale=1.0">  http-equiv="X-UA-Compatible" content="ie=edge"> React Typescript Webpack    id="root">

Note that no script was referenced. This is because this file act as a template for every build using a plugin for webpack.

html-webpack-plugin 🔌

A plugin for webpack that automatically includes an html page with a reference to the bundle in the output folder.

npm install --save-dev html-webpack-plugin@4.5.2 

and edit the webpack.config.js like this

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports =  mode: 'none', entry:  app: path.join(__dirname, 'src', 'index.tsx') >, target: 'web', resolve:  extensions: ['.ts', '.tsx', '.js'] >, module:  rules: [  test: /\.tsx?$/, use: 'ts-loader', exclude: '/node_modules/' > ], >, output:  filename: '[name].js', path: path.resolve(__dirname, 'dist') >, plugins: [ new HtmlWebpackPlugin( template: path.join(__dirname, 'src', 'index.html') >) ] > 

You only need a server to serve your web app through the dist directory.
A dirty but fast solution would be

npm i -g live-server cd dist live-server 

It is nice because it auto-reloads on every build.

Remember, you have an entire src directory for writing and structure your dream app ✨ For me is useful to put all the app components inside a directory called components to keep things clear.

References

Top comments (6)

Starting a small dev agency, looking for devs to work on html, css, javascript apps, websites, and banners. Possibly expanding to framework work, including vue and react apps.

Big thanks for this setup! I did notice that I get an error related to «webpack_modules» saying something like, «process is not defined»

Looks like you have to either use dotenv or webpack.DefinePlugin in the webpack.config.js file to make it compile and display on the webpage without error.

const dotenv = require('dotenv'); dotenv.config(); 

be sure to run yarn add or npm install dotenv, and create an .env file (add to .gitignore)!

2 likes Like Comment button

Thanks for pointing out but probably you were using a different version of the dependencies, is this possible? I just tried to recreate the project and I’m able to print the process.env variable.

I have had a similar issue in other projects that were using webpack@5 and this answer on StackOverflow provides yet another solution.

You are right anyway, since Webpack bundles everything together you need a way to pass your environment variables (that lives where you build the app) to your .js bundle (that will run in a separate context, usually a browser somewhere on the internet) and for this, you need the DefinePlugin (or better, the EnvironmentPlugin) plus a variable loader such dotenv — personally I prefer using env-cmd: you create the dotenv file and then you can edit your build command to something like this build: env-cmd webpack —config webpack.config.js .

Hope this can help future readers 🙂

p.s.: Recreating the project I have noticed that the latest version of html-webpack-plugin doesn’t work with the listed dependencies so I have updated the post to install a previous version. Without your comment probably a lot of people would have gone crazy about this xD

1 like Like Comment button

Источник

Setup React Application using Typescript and Webpack

In this post we will learn how to add support of TypeScript to your React Js application having webpack and babel configured. Please note that in this post I’m going to modify previously setup React Js application to add support for TypeScript. If you haven’t yet gone through that post then please start with Setup Webpack and Babel for a React Js Application and come back to this post.

Why Typescript?

According to official documentation, TypeScript is a strongly typed superset of JavaScript which uses TypeScript Compiler to compile it into plain JavaScript. TypeScript provide pure Object Oriented implementation to use classes, interfaces and inheritance. TypeScript check error in code at compile time and if any error found, then it shows the mistakes before the script is run. Also it support all existing JavaScript library as it is a superset of JavaScript. It make development quick and easy as possible and developers can save lot of time.

Installations

We need to install some packages which are essential to configure TypeScript in React application. Run below commands to install required packages:

npm install -D typescript ts-loader @types/node @types/react @types/react-dom 

• typescript package is main engine for TypeScript.
• ts-loader is loader for Webpack that integrates TypeScript in Webpack. This will convert files with .ts extension into .js files and bundle it.
• @types/node, @types/react and @types/react-dom contains the type definitions required for node, react and react dom.

Configuring Typescript

Add tsconfig.json file to the root directory location where package.json exists. Name should be exact same as mentioned and the below configurations into it.

Configuring Webpack

Webpack need to be configured to have support for TypeScript files. Here is small change you need to add in webpack.config.js

Add ts-loader (loader) and test for _ts _and _tsx _files.

add Test for .ts and .tsx extension to resolve:

//_webpack.config.js_ . resolve: < extensions: [ '.tsx', '.ts', '.js' ], >. 

And one final change in webpack config is to rename the _js _files to _tsx _in your react application and update the entry point

//_webpack.config.js_ . entry: "./src/index.tsx", . 

Testing Working for Typescript with React

To test the application, we create one component App which will take one prop of type number which will get passed by index.tsx

//_index.tsx_ import React from "react"; import ReactDOM from "react-dom"; import "./style.css"; import < App >from "./components/App"; ReactDOM.render( />, document.getElementById("root")); 

//components/App.tsx import React from "react"; type AppProps = < num: number >; export const App = (: AppProps) => Total Number: ; 

Boo-yah!😍 We are all set with TypeScript❤️.

Now just try to change the value which we were passing through props.

For example I’ll just change number 1234 to string “1234” and check what will happen.

As expected, Intellisense will show error like this so that we will identify it before building application. Isn’t it a great thing!

Also if we try to build it, command prompt will show error like this:

Error are self explanatory so that we can easily identify mistakes and correct it.

Conclusion

In this blog post we successfully configured TypeScript with React application and tested if it works properly or not.

Please do share your feedback and experiences with TypeScript in the comments section below. I’d love to see what you come up with!

If you found this article useful, please share it with your friends and colleagues!❤️

Read more articles on Dev.To ➡️ Shivam Pawar

Источник