1) Создайте папку, в которой будут храниться все файлы вашего проекта. Назовите её для примера "project".
2) В этой папке создайте:
- папку "src"
- папку "dist"
- файл "package.json"
- файл "tsconfig.json"
- файл "webpack.config.js"
- файл "index.html"
3) Внутри папки "src" создайте:
- папку "components"
- файл "index.tsx"
4) Внутри папки "components" создайте:
- файл "Hello.tsx"
5) Поместите в созданные файлы следующий код.
Код для файла package.json
{
"version": "1.0.0"
, "name": "react-typescript-webpack"
, "description": "React, TypeScript and Webpack"
, "keywords": ["react", "typescript", "webpack"]
, "author": "John Doe"
, "engines": {
"node": "6.9.0"
, "npm": "3.10.9"
}
, "dependencies": {
"react": "15.3.2"
, "react-dom": "15.3.2"
}
, "devDependencies": {
"webpack": "1.13.2"
, "typescript": "2.0.3"
, "ts-loader": "0.9.4"
, "source-map-loader": "0.1.5"
, "@types/react": "0.14.41"
, "@types/react-dom": "0.14.18"
}
}
Код для файла tsconfig.json
{
"compilerOptions": {
"target": "es5"
, "module": "commonjs"
, "jsx": "react"
, "sourceMap": true
, "noImplicitAny": true
}
}
Код для файла webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.tsx'
, output: {
filename: './dist/bundle.js'
}
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
, externals: {
'react': 'React'
, 'react-dom': 'ReactDOM'
}
, resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
, alias: {
Hello: path.resolve(__dirname, './src/components/Hello.tsx')
}
}
, module: {
preLoaders: [
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{test: /\.js$/, loader: 'source-map-loader'}
]
, loaders: [
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{test: /\.tsx?$/, loader: 'ts-loader'}
]
}
// Enable sourcemaps for debugging webpack's output.
, devtool: 'source-map'
};
Код для файла index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<!-- Dependencies -->
<script src="./node_modules/react/dist/react.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.js"></script>
<!-- Main -->
<script src="./dist/bundle.js"></script>
</body>
</html>
Код для файла index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {Hello} from 'Hello';
ReactDOM.render(<Hello compiler="TypeScript" framework="React" />, document.getElementById('example'));
Код для файла Hello.tsx
import * as React from 'react';
export interface HelloProps {
compiler: string;
framework: string;
}
export class Hello extends React.Component<HelloProps, {}> {
render () {
return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
}
}
6) Откройте командную строку и перейдите в ней в папку вашего проекта "project":
cd C:\path\to\project
7) Выполните команду:
npm install
8) Выполните команду:
webpack
9) Откройте файл "index.html" в браузере, чтобы убедиться. что всё работает и увидеть надпись "Hello from TypeScript and React!".
Комментариев нет:
Отправить комментарий