TypeScript+React+webpack Demo
2018-07-09 本文已影响0人
亲亲美人鱼1
创建项目目录
项目目录
TypeScript文件会放在src文件夹里，通过TypeScript编译器编译，然后经webpack处理，最后生成一个bundle.js文件放在dist目录下。 我们自定义的组件将会放在 src/components文件夹下
初始化工程
npm init
安装依赖包
- 首先，确保全局安装了webpack
npm install -g webpack - 安装react相关
npm install --save react react-dom @types/react @types/react-dom - 添加开发时依赖awesome-typescript-loader和source-map-loader
npm install --save-dev typescript awesome-typescript-loader source-map-loader
添加TypeScript配置文件
项目根路径下增加tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}
Demo代码编写
- src>component目录下添加greeter.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>;
}
}
- src目录下添加index.tsx文件
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Hello } from './components/greeter';
ReactDom.render(
<Hello compiler="typescript" framework="react" />,
document.getElementById('demo')
)
- 增加一个页面展示组件，根目录下添加index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="demo"></div>
<!-- Dependencies -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- Main -->
<script src="./dist/bundle.js"></script>
</body>
</html>
webpack配置
工程根目录下创建一个webpack.config.js
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
// 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"
},
};
构建命令添加
- package.json中添加以下内容
...
"scripts": {
"build": "webpack"
},
...
- 运行以下命令进行构建
npm run build -
浏览器打开index.html查看效果
效果图
