npm i -g webpack webpack-dev-server typescript
创建项目目录
mkdir projecttest
cd prokecttest
npm init
创建tsconfig.json
{ "compilerOptions": { "jsx":"react", //tsx转换为js，不是不是jsx "module": "commonjs", "target": "es5", "sourceMap": true }, "exclude": [ "node_modules" ] }
创建文件目录
mkdir src //代码目录
mkdir lib //代码输出目录
mkdir config //配置文件目录
lib目录下创建index.html
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <title>Hello world</title> <script src="http://localhost:8080/webpack-dev-server.js"></script> </head> <body> <div id="app"></div> <script src="assets/app.bundle.js"></script> </body> </html>
config目录下创建文件webpack.config.js
/* build/webpack.config.js */ var path = require('path') const config = { entry: './src/index.tsx', output: { filename: 'app.bundle.js', path: path.resolve(__dirname, '../lib'), publicPath: '/assets' }, devtool: 'source-map', resolve: { extensions: [ // '', '.webpack.js', '.web.js', '.ts', '.tsx', '.js' ] }, module: { loaders: [{ test: /.tsx?$/, loader: 'ts-loader' }, { test: /.js$/, loader: 'source-map-loader' }, { test: /.css$/, loader: 'css-loader' } ], }, devtool: 'eval' } module.exports = config
src目录下创建index.tsx
import * as React from 'react' import {render} from 'react-dom' interface AppProps{} interface AppStates{} class App extends React.Component<AppProps,AppStates> { constructor(props) { super(props) } render():JSX.Element{ this.updateTime() return( <div id='app'> <p>App content</p> </div> ) } } render(<App/>,document.getElementById('app'))
安装依赖包
npm i --save-dev ts-loader source-map-loader
npm i --save-dev react react-dom @types/react @types/react-dom //@types/react @types/react-dom添加到dev中，防止有的版本引用错误
npm link webpack webpack-dev-server typescript //项目链接到全局
package.json script添加执行命令
"dev": "webpack-dev-server --inline --config config/webpack.config.js --content-base lib --open"
create react app typescript
运行命令： create-react-app projectname --scripts-version=react-scripts-ts