TypeScript拾起来记载，webpack-cli构建学习！

codewhite
59 阅读3分钟

学习ts前的环境准备，需要安装得依赖如下：

1. 环境准备

  • 全局安装依赖TypeScript，打开终端
  • npm install -g typescript
npm install -g typescript
  • 查看ts有哪些命令
    • 终端输入tsc -h

image.png

  • 当开发自己不清楚如何配置tsconfig.json时，我们常会使用
    • 需要使用的地方，打开终端输入tsc --init会给我们生成默认的配置文件

1.1. 运行环境-node环境下

  • 开发学习中想要通过node运行，我们还需要全局安装以下两个依赖包

    • npm install ts-node -g
    • npm install tslib @types/node -g

  • 使用ts-node 文件相对路径

image.png

1.2. 运行环境-webpack环境下

  • 通过webpage脚手架跑起来，需要安装依赖,当前项目使用我们一般都是局部安装

    • 版本学习：webpack5版本和webpack-cli5版本
    • 局部安装：npm i webpack webpack-cli webpack-dev-server -D

  • 使用webpack脚手架运行，为了方便可以安装以下插件包，提升开发学习效率

    • webpack对ts文件的支持需要安装ts-loader包解析，局部也需要安装typescript

      • 局部安装：npm install ts-loader typescript -D

    • 提升开发效率，可以安装dev-server服务也就是webpack帮我们搭建的express框架

      • 局部安装：npm install webpack-dev-server -D
      • 注意事项：当使用webpack-dev-server时，须配置静态文件存放路径，影响网站小图标显示

    • 安装默认模板插件，可进行个性化配置

      • 局部安装：npm install html-webpack-plugin -D
      • 配置获取：<%= htmlWebpackPlugin.options.title %>

2. 配置webpack.config.js文件简易版配置文件，引入上面安装的插件包，进行配置

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin } = require('webpack');

module.exports = {
    // 设置模式 开发-->development 上线-->production
    mode: 'development',
    target: 'web', // 打包环境运行在浏览器Web 结合 模块热替换 使用
    // js 代码映射具体位置 方便调试定位bug等
    devtool: 'source-map',
    entry: './src/main.ts',
    // webpack 通过express socket起一个本地服务器 将项目打包 放到本地内存（memfs）中 浏览器解析显示
    devServer: {
        static: path.join(__dirname, 'public'), // 静态文件存放路径
        hot: true, // 模块热替换
        port: 3000, // 端口号
        // 0.0.0.0 IPv4 下都可通过 ip访问此项目
        // host: '127.0.0.1',
        open: true // 自动打开浏览器
        // compress: true, // 启用 gzip 压缩
    },
    resolve: {
        // 给当前项目设置别名 指定别名的路径
        alias: {
            '@': path.resolve(__dirname, './src')
        },
        extensions: ['.ts', '.js', '.vue', '.json', '.jsx', '.tsx', '.mjs', '.wasm'] // 导入 添加扩展名
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/bundle.js',
        chunkFilename: 'js/[name].js' // 打包，懒加载分包需要打包成的名字格式
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader'
            },
            {
                test: /\.(png|jpe?g|gif|ico)$/i,
                type: 'asset',
                generator: {
                    filename: 'img/[name]_[hash:6][ext]'
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024
                    }
                }
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            title: 'TypeScript',
            // favicon: './public/favicon.ico', // 网站小图标
            scriptLoading: 'defer' // 以非阻塞的方式加载script脚本
        }),
        new DefinePlugin({
            BASE_URL: '"./"'
        })
    ]
};

3. tsconfig.json简易配置，详细配置移步TypeScript官方文档

{
  "compilerOptions": {
    /* Modules */
    "module": "commonjs",
    "baseUrl": "./",      
    "paths": {
      "@/*": [
        "./src/*"
      ],
    }, 
    "skipLibCheck": true 
  },
  "ts-node": {
    // Do not forget to `npm i -D tsconfig-paths`  安装插件识别 定义的别名
    "require": [
      "tsconfig-paths/register"
    ]
  }
}
avatar
文章
阅读
粉丝