搭一个ts-react-webpack框架的步骤

2019/3/5

1、npm init 2、创建文件夹：client，webpack，html，和 public 3、在 html 文件里，创建一个 index.html;

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge,Chrome=1" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no" />
    <title><%= title %></title>
  </head>
  <body>
    <div id="bd"></div>
    <section id="global"></section>
  </body>
</html>

4、在 client 文件里，创建一个 index.tsx 文件，内容先留空。 5、安装 react，react-dom，react-router，react-router-dom，redux，react-redux, redux-thunk 6、安装 webpack，webpack-cli，webpack-dev-server 7、安装@types/react,@types/react-dom,@types/react-redux,@types/react-router-dom,@types/redux 8、安装开发时的依赖：awesome-typescript-loader 和 source-map-loader。 9、在 client 文件夹里创建一个 root.tsx 文件，创建 pages，components，route 文件夹 10、在 pages 里创建一个 index.tsx 内容为

import * as React from 'react';

// 'HelloProps' describes the shape of props.
// State is never set so we use the '{}' type.
export default class Hello extends React.Component<{}> {
  public render() {
    return (
      <div>
        <h1>Hello TypeScript!</h1>
        <div>lalala</div>
      </div>
    );
  }
}

11、在 route 里创建一个 app.tsx 的路由文件

import * as React from 'react';
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';

import Index from '../pages/index';

class App extends React.Component<{}> {
  public render() {
    return (
      <BrowserRouter>
        <React.Fragment>
          <Switch>
            <Route path="/index" component={Index} />
            <Route path="/" exact component={Index} />
          </Switch>
        </React.Fragment>
      </BrowserRouter>
    );
  }
}

export default App;

12、在 root.tsx 里添加内容：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './route/App';

const root = document.getElementById('bd');
const render = (Component: any) => {
  ReactDOM.render(<Component />, root);
};

render(App);

13、在根目录添加 tsconfig.json 文件

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "module": "commonjs",
    "target": "es5",
    "jsx": "react"
  },
  "include": ["./client/**/*"],
  "exclude": ["node_modules"]
}

14、配置 webpack，在 webpack 文件夹里创建 webpack.dev.js 安装：@types/webpack-env，@types/node html-webpack-plugin

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const packageObj = require('../package.json');

const publicPath = '/';

const config = {
  // 入口
  entry: {
    index: path.join(__dirname, '../client/Root.tsx')
  },
  // 输出
  output: {
    path: path.join(__dirname, '../dist'), // 文件的存放路径
    publicPath,
    filename: '[name].[hash:8].js'
  },
  // 解析
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'], // 添加对应的扩展名
    modules: ['node_modules', path.resolve(__dirname, 'client')], // modules 包括node_modules 和client
    alias: {
      client: path.resolve(__dirname, 'client/')
    }
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: 'awesome-typescript-loader' },
      { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' }
    ]
  },
  devtool: 'eval-source-map',
  mode: 'development',
  devServer: {
    host: '0.0.0.0',
    compress: true,
    clientLogLevel: 'none',
    hot: true, // 热更替
    historyApiFallback: {
      disableDotRule: true
    },
    stats: 'minimal', //信息
    disableHostCheck: true, // 不检查host
    proxy: {}
  },
  plugins: [
    // 把打包好的js注入到html里
    new HtmlWebpackPlugin({
      template: './html/index.html',
      filename: 'index.html',
      //html 模版的参数
      templateParameters: {
        title: packageObj.name,
        environment: 'dev'
      },
      inject: true
    }),
    //HotModuleReplacementPlugin 插件是告诉我们用热加载
    //NamedModulesPlugin 是用来清空编译日志的，这样只会显示我们入口文件信息。
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
};

module.exports = config;

15、修改 Root.tsx,添加热更替

/**
 * 好几个坑，第一个是要在tslint里面加上 "moduleResolution": "node",
 * 第二个：hot不能显示，需要安装@types/webpack-env
 * 第三个，module.hot.accept 函数接收两个参数，第一个是string类型的url，另一个是一个cb
 * 第四个，export default的module，require需要用.default 来引入
 */
if (module.hot) {
  module.hot.accept('./route/App', () => {
    const NextApp = require('./route/App').default;
    render(NextApp);
  });
}

16、添加 tslint tslint-config-prettier tslint-eslint-rules tslint-react 等插件

npm i tslint tslint-config-prettier tslint-eslint-rules tslint-react

17、在根目录下创建并配置 tslint.json

{
  "extends": [
    "tslint:recommended",
    "tslint-react",
    "tslint-eslint-rules",
    "tslint-config-prettier"
  ],
  "linterOptions": {
    "exclude": ["node_modules/**/*.ts"]
  },
  "defaultSeverity": "error",
  "rules": {
    "no-implicit-dependencies": false,
    "no-submodule-imports": false,
    "no-console": false
  }
}

18、添加一个类型检查和编译的分开的插件'fork-ts-checker-webpack-plugin'

npm i fork-ts-checker-webpack-plugin

webpack.dev.js 需要加入

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

...
new ForkTsCheckerWebpackPlugin({
      async: false,
      watch: '../client',
      tsconfig: path.resolve(__dirname, '../tsconfig.json'),
      tslint: path.resolve(__dirname, '../tslint.json')
    })

一个 ts-react-webpack 的框架就搭的差不多了。。哈哈哈然后开始加一些其他的东西比如 redux

帕吉小馆

Choose mode

搭一个ts-react-webpack框架的步骤

搭一个ts-react-webpack框架的步骤