react tsx

時間 2019-11-11

標籤 react tsx 欄目 React 简体版

原文原文鏈接

npm i -g webpack webpack-dev-server typescript

建立項目目錄css

mkdir projecttest
cd prokecttest
npm init

建立tsconfig.jsonhtml

{
  "compilerOptions": {
    "jsx":"react", //tsx轉換爲js，不是否是jsx
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

建立文件目錄node

mkdir src //代碼目錄
mkdir lib //代碼輸出目錄
mkdir config //配置文件目錄

lib目錄下建立index.htmlreact

<!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.jswebpack

/* 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.tsxweb

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'))

安裝依賴包typescript

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添加執行命令npm

"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-tsjson

相關標籤/搜索

react+webpack+redux+react

webpack+react+redux+react

antd+react+react

react+redux+react

React

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。