proj/
+- node.exe
|
+- node_modules
| +- npm/
|
+- npm.cmd
|
+- src/
| +- components/
|
+- dist/
Создание структуры проекта из командной строки cmd.
mkdir proj
cd proj
mkdir src
cd src
mkdir components
cd ..
mkdir dist
Создание package.json из командной строки cmd.
npm init
Содержимое package.json.
{
"version": "1.0.0"
, "name": "webpack-typescript-react"
, "description": "Webpack Typescript React"
, "engines": {
"node": "6.3.1"
, "npm": "3.10.6"
}
, "dependencies": {
"typescript": "1.8.10"
, "typings": "1.3.2"
, "webpack": "1.13.1"
, "ts-loader": "0.8.2"
, "source-map-loader": "0.1.5"
, "react": "15.3.0"
, "react-dom": "15.3.0"
}
}
Установка библиотек из командной строки cmd.
npm install typescript
npm install typings
npm install webpack
npm install ts-loader
npm install source-map-loader
npm install react
npm install react-dom
Удалить папки и файлы
proj/etc
proj/typings
proj/tsc
proj/tsserver
proj/tsserver.cmd
proj/webpack
{
"rejectUnauthorized": false
}
Установка файлов d.ts из командной строки cmd.
typings install --save react
typings install --save react-dom
Эти команды создадут папку typings и файл typings.json.
Создать в папке proj файл tsconfig.json с содержимым:
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"files": [
"./typings/index.d.ts",
"./src/components/Hello.tsx",
"./src/index.tsx"
]
}
Создать в папке proj файл webpack.config.js с содержимым:
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "./dist/bundle.js",
},
// Включить sourcemaps для отладки вывода webpack.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
// Все файлы с расширениями '.ts' и '.tsx' будут обработаны 'ts-loader'.
{ test: /\.tsx?$/, loader: "ts-loader" }
],
preLoaders: [
// Все итоговые файлы '.js', имеющие sourcemaps будут обработаны 'source-map-loader'.
{ test: /\.js$/, loader: "source-map-loader" }
]
},
// При импорте модуля, чей путь соответствует одному из ниже приведенных,
// просто предположим, что он уже загружен и не будем добавлять его в пакет,
// что позволит браузеру кэшировать библиотеки между сборками проекта.
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
};
В папке proj/src/components создадим файл 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>;
}
}
В папке proj/src создадим файл index.tsx с содержимым:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {Hello} from './components/Hello';
ReactDOM.render(
<Hello compiler="TypeScript" framework="React" />,
document.getElementById('example')
);
В папке proj создадим файл index.html с содержимым:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<!-- Зависимости -->
<script src="./node_modules/react/dist/react.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.js"></script>
<!-- Главный файл -->
<script src="./dist/bundle.js"></script>
</body>
</html>
Запустим сборку проекта из командной строки cmd.
webpack
Эта команда создаст папку dist с файлами bundle.js и bundle.js.map в ней.
Итоговый состав содержимого папки proj:
node_modules
npm.cmd
package.json
.typingsrc
tsconfig.json
typings.json
webpack.config.js
tsc.cmd
typings.cmd
webpack.cmd
typings
src
dist
index.html
Комментариев нет:
Отправить комментарий