WebPack4接入TypeScript开发

朴灿烈づ我的快乐病毒、 2021-11-17 08:46 427阅读 0赞

### 接入TypeScript ###

#### 1、添加开发依赖 ####

npm install --save-dev typescript awesome-typescript-loader source-map-loader

#### 2、创建 tsconfig.json 文件： ####

./node_modules/.bin/tsc --init

#### 3、安装@types/react，@types/react-dom ####

npm install @types/react @types/react-dom --save

#### 4、添加webpack的loader ####

npm install awesome-typescript-loader -D
    npm install source-map-loader -D

#### 5、编辑tsconfig.json ####

{
      "compilerOptions": {
        /* Basic Options */
        "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
        "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
        "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
        "sourceMap": true,                        /* Generates corresponding '.map' file. */
        "outDir": "./dist/",                      /* Redirect output structure to the directory. */
        "strict": true,                           /* Enable all strict type-checking options. */
        "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
      },
      "include": [
        "./src/**/*"
      ]
    }

#### 6、 编辑 `webpack.typescript.js` ####

##### 6.1 添加`tsloader` , `source-map-loader` #####

##### 6.2 添加reslove，设置文件后缀补全顺序 #####

#### 7、 创建一个TypeScript组件 ####

import * as React from "react";
    
    export interface HelloProps { 
        compiler: string; 
        framework: string; 
    }
    
    export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;

#### 8、 创建一个TypeScript入口文件 ####

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("root")
    );

#### 9、 在package.json的script中添加一条命令`buildTS` ####

"scripts": {
        "buildTS": "./node_modules/.bin/webpack-cli --config webpack.typescript.js",
      },

#### 10、编译输出页面 ####

npm run buildTS

#### 11、使用sourceMap调试 ####

devtool: "source-map",

![image][]

然而vue-cli脚手架搭建的工程，开发环境使用的是eval-source-map，生产环境用的是source-map。不管怎么说的，其实用起来感觉都差不多。但是，直接将sourceMap放入打包后的文件，会明显增大文件的大小，不利于静态文件的快速加载；而外联.map时，.map文件只会在F12开启时进行下载（sourceMap主要服务于调试），故推荐使用外联.map的形式。

参考文档： [sourceMap文档][sourceMap]

#### 12、使用devServer开发 ####

安装webpack-dev-server，?代码可以自动更新。

npm install --save-dev webpack-dev-server

webpack-dev-server有很多的配置项，其中之一是`--config`,这个可以让我们启动多个server，因为每一个-dev-server相关的配置都在`--config`配置的webpack.config.js中指定。

"scripts": {
        "startTS": "webpack-dev-server --open --color --hot --config webpack.config.js",
      },

#### 13、安装antd-mobile ####

antd-mobile

$ npm install antd-mobile --save

这里刚开始的时候，总是在提示`babel`相关的错误，找不到babel-core或者找不到babel-loader，一开始按照常规思路，缺什么装什么，后来发现，这似乎是永无止境。那么及时的调整思路，

1.  先去google上看看，发现好多人说是babel升级到7导致的。但是按照上面的建议处理后，发现没有效果。
2.  把babel的错误，复制出来，百度看看， 发现有一个哥们遇到了这个问题，他的解决方法如下：

npm  install -D babel-loader @babel/core @babel/preset-env webpack

不过我第一次装了之后发现没用，后来干脆把`package.json`中的`babel-loader`、`@babel/core`都删掉，然后执行这条命令，发现可以了。

这个步骤，其实可以换种思路，当我们发现这些问题的时候，应该有如下几种思路：

1. 去搜索引擎搜索
    2. 去插件的官网查看，最近有没有版本升级，以及这个插件的原理是什么
    3. 是在没办法，就去查看插件的源码，当然这是很花费时间的

#### 14、使用typeScript开发项目 ####

#### 15、接入F2图表 ####

1)、 安装F2图表

npm install @antv/f2 --save

2)、 使用F2图表

const F2 = require('@antv/f2');

3）、实现第一个组件

import React from 'react';
    const F2 = require('@antv/f2');
    
    class SimpleChart extends React.Component{
        constructor(props){
            super(props);
            // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
            this.state = {
                data : [
                    { genre: 'Sports', sold: 275 },
                    { genre: 'Strategy', sold: 115 },
                    { genre: 'Action', sold: 120 },
                    { genre: 'Shooter', sold: 350 },
                    { genre: 'Other', sold: 150 },
                ]
            };
        }
    
        componentDidMount() {
            // Step 1: 创建 Chart 对象
            this.chart = new F2.Chart({
                id: 'myChart',
                pixelRatio: window.devicePixelRatio // 指定分辨率
            });
            // Step 2: 载入数据源
            this.chart.source(this.state.data);
            // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
            this.chart.interval().position('genre*sold').color('genre');
            // Step 4: 渲染图表
            this.chart.render();
        }
    
        render(){
            return (
                <canvas id="myChart" width="320" height="260"></canvas>
            );
        }
    }
    
    
    export default SimpleChart;

4)、使用React Hooks实现

import React, { useState, useEffect } from 'react';
    // import { useState, useEffect } from 'react';
    const F2 = require('@antv/f2');
    
    function SimpleChartHooks(){
        const myRef = React.createRef();
         // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
        const [data, setdata] = useState(
          [
                { genre: 'Sports', sold: 275 },
                { genre: 'Strategy', sold: 115 },
                { genre: 'Action', sold: 120 },
                { genre: 'Shooter', sold: 350 },
                { genre: 'Other', sold: 150 },
            ]
        );
    
        useEffect(() => {
            console.log(myRef,myRef.current.id, data);
            // Step 1: 创建 Chart 对象
            const chart = new F2.Chart({
                id: 'myChart2',
                pixelRatio: window.devicePixelRatio // 指定分辨率
            });
            // Step 2: 载入数据源
            chart.source(data);
            // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
            chart.interval().position('genre*sold').color('red');
            // Step 4: 渲染图表
            chart.render();
        });
    
        return (
            <canvas ref={myRef} id="myChart2" width="320" height="260"></canvas>
        );
    
    }
    
    export default SimpleChartHooks;

#### 16、ReactHooks使用 ####

16.1、使用RectHooks开发一个组件

16.2、使用ReactHooks更新数据状态

#### 17、开启package-lock.json ####

之前一直以为是npm的问题，然后一直按照这个思路走，结果总是不对。其实这种思考方式太线性了。首先我们要清楚整个业务有多少个步长，然后一步一步去排查问题。否则很难快速定位到问题的所在。

![image.png][]

#### 18、在webpack项目中使用Loader要注意的点 ####

![image.png][image.png 1]

在rules中的配置

{ 
        test: /\.tsx?$/, 
        use: [
          {
            loader: 'babel-loader',
            options: babelrc
          },
          { 
            loader: 'ts-loader'
          },
        ]
      },

注意TypeScript导出的类型，可能是const。

#### 19、处理scss文件 ####

使用样式文件

import * as React from "react";
    import styles from './index.scss'
    
    export interface HelloProps { 
        compiler: string; 
        framework: string; 
    }
    
    export const Hello = (props: HelloProps) => {
        return (
            <div className={styles.box}>
                <h1>Hello from {props.compiler} and {props.framework}!</h1>
            </div>
        );
    };

加载规则

const typingsForCssModulesLoaderConf = {
      loader: 'typings-for-css-modules-loader',
      options: {
        modules: true,
        namedExport: true,
        camelCase: true,
        sass: true
      },
    };

多个loader综合配置

{
        test: /\.[s]*css/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [typingsForCssModulesLoaderConf,'sass-loader'],
        }),
      },

#### 20、如何处理结构化的scss文件 ####

本地安装sass-loader ，然后再loader中使用就可以了。

[TypeScript使用scss][TypeScript_scss]

### 待解决问题？ ###

#### 21、happyLoader是什么, 怎么使用？好用吗？ ####

[image]: /images/20211116/711ea32bb70240088b709c48e7f64478.png
[sourceMap]: https://www.jianshu.com/p/ad96e712564c
[image.png]: /images/20211116/095e57273d4049f9aae5cc26c3055752.png
[image.png 1]: /images/20211116/692bee04e94a4259bfa85677bf6b2eea.png
[TypeScript_scss]: https://juejin.im/post/5bac89346fb9a05d0e2e6dd6#heading-3