1. Python技术站首页
  2. node js

教你使用webpack打包编译TypeScript代码

• node js

教你使用webpack打包编译TypeScript代码

为什么要使用webpack和TypeScript？

在前端开发的过程中，我们经常需要使用Webpack来统一打包我们的前端代码，将多个js、css文件合并成一个或多个bundles，减小代码的体积，并且利于加载和缓存。

而TypeScript是JavaScript的一种超集，它给JavaScript加上了一些静态类型，使得代码更加可读、可维护，同时提供了更好的IDE支持和错误检测，是一个非常优秀的编程语言。

因此在前端开发中，结合使用Webpack和TypeScript可以提高开发效率和代码的可维护性。

步骤

  1. 初始化项目

首先，我们需要在项目根目录下初始化一个package.json文件，用于管理项目的依赖。

可以使用如下的命令在命令行中初始化：

bash
npm init -y

这个命令会在当前目录下生成一个默认的package.json文件。

  1. 安装Webpack和TypeScript

在命令行中执行以下命令，安装Webpack和TypeScript：

bash
npm install webpack webpack-cli typescript ts-loader --save-dev

  • webpack和webpack-cli：用于Webpack的打包和构建。
  • typescript：TypeScript编译器。

  • ts-loader：Webpack的TypeScript加载器，用于将TypeScript代码转为JavaScript代码。

  • 配置TypeScript

在项目根目录下，创建一个tsconfig.json文件，用于配置TypeScript的编译选项。

示例：

json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"allowJs": true,
"outDir": "./dist",
"esModuleInterop": true
},
"include": ["./src/**/*"]
}

  • compilerOptions：编译选项。

  • include：需要编译的文件目录。

  • 配置Webpack

在项目根目录下，创建一个webpack.config.js文件，用于配置Webpack的打包选项。

示例：

```javascript
const path = require('path');

module.exports = {
mode: 'development',
entry: './src/main.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
// 添加 '.ts' 和 '.tsx' 后缀
extensions: ['.ts', '.tsx', '.js']
},
module: {
rules: [
{
test: /.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
};
```

  • mode：指定构建模式，可以是development或production。
  • entry：指定入口文件。
  • output：指定输出文件的名称和目录。
  • resolve：指定可处理的文件后缀名。

  • module：指定webpack的module相关配置项。

    • rules：指定规则，用于对指定文件进行一系列处理。
    • test：指定需要处理的文件匹配规则。
    • use：指定使用的loader。
    • exclude：指定需要排除的文件或目录。

  • 编写代码

在src目录下编写TypeScript代码。

示例：

```typescript
const greeting: string = 'Hello, TypeScript!';

console.log(greeting);
```

  1. 打包代码

在命令行中执行以下命令，打包代码：

bash
npx webpack

执行完这个命令后，Webpack将会根据配置文件和指定的入口文件将代码打包到dist/bundle.js文件中。

  1. 运行代码

在浏览器中打开dist目录下的index.html文件，看到控制台输出"Hello, TypeScript!"即表示运行成功。

示例1

现在，让我们来看一个实际的例子，如何在TypeScript中使用Vue3和ElementUI，并通过Webpack进行打包。

  1. 初始化项目

在命令行中执行以下命令，初始化项目：

bash
vue create vue-ts-element-webpack

具体的Vue CLI使用可以参考Vue CLI 官方文档。

  1. 安装依赖

在命令行中执行以下命令，安装依赖：

bash
cd vue-ts-element-webpack
npm install vue@next @vue/compiler-sfc element-plus --save

具体的Vue3和ElementUI使用可以参考Vue3 官方文档和ElementUI 官方文档。

  1. 配置TypeScript

在项目根目录下，创建tsconfig.json文件，添加以下配置项：

json
"moduleResolution": "node",
"esModuleInterop": true,
"jsx": "preserve",
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"module": "es6",
"isolatedModules": false,
"target": "es6",
"lib": ["esnext", "dom"],
"strict": true,
"experimentalDecorators": true

  1. 配置Webpack

在项目根目录下，创建webpack.config.js文件，添加以下配置项：

```javascript
const path = require('path');
const { DefinePlugin } = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
const { ESBuildMinifyPlugin } = require('esbuild-loader');

module.exports = {
mode: 'production',
entry: './src/main.ts',
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /.vue$/,
use: 'vue-loader',
},
{
test: /.ts$/,
loader: 'esbuild-loader',
options: {
loader: 'ts',
target: 'es2015',
},
exclude: /node_modules/,
},
{
test: /.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
esModule: false,
name: '[name].[hash:8].[ext]',
outputPath: 'img',
publicPath: './img',
},
},
],
},
],
},
resolve: {
extensions: ['.ts', '.js', '.vue'],
alias: {
vue$: 'vue/dist/vue.runtime.esm-bundler.js',
'@': path.resolve(__dirname, 'src'),
},
},
plugins: [
new DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
new VueLoaderPlugin(),
new ESBuildMinifyPlugin(),
],
optimization: {
splitChunks: {
chunks: 'all',
},
},
};
```

在这个配置文件中，我们使用了：

  • vue-loader：处理Vue文件的Webpack加载器。
  • esbuild-loader：使用ESBuild来编译TypeScript文件。

  • DefinePlugin：定义环境变量，用于指定NODE_ENV。

  • 编写代码

在src目录下编写代码。

示例：

```typescript
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

import App from './App.vue';

const app = createApp(App);

app.use(ElementPlus);
app.mount('#app');
```

  1. 打包代码

在命令行中执行以下命令，打包代码：

bash
npx webpack

执行完这个命令后，Webpack将会根据配置文件和指定的入口文件将代码打包到dist目录下。

然后打开dist目录下的index.html文件，在浏览器中运行，可以看到包含ElementUI的Vue3应用已经成功运行。

示例2

接下来，我们再来看一个比较复杂的案例，比如在TypeScript + React + Redux + Antd的开发环境下，如何通过Webpack进行打包。

  1. 初始化项目

在命令行中执行以下命令，初始化项目：

bash
npx create-react-app react-ts-redux-antd --template typescript
cd react-ts-redux-antd
npm install antd redux @types/react-redux @types/react-dom --save

具体的React、Redux和Antd的使用可以参考React官方文档、Redux官方文档和Antd官方文档。

  1. 安装依赖

在命令行中执行以下命令，安装依赖：

bash
npm install webpack webpack-cli webpack-dev-server clean-webpack-plugin html-webpack-plugin css-loader style-loader less-loader less postcss-loader autoprefixer babel-loader @babel/core @babel/preset-react @babel/preset-typescript --save-dev

其中，babel-loader和@babel/preset-react用于将JSX语法转为JavaScript语法，@babel/preset-typescript用于将TypeScript代码转为JavaScript代码。

  1. 配置TypeScript

在项目根目录下，创建tsconfig.json文件，添加以下配置项：

json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"jsx": "react",
"sourceMap": true,
"allowJs": true,
"outDir": "./dist",
"esModuleInterop": true,
"isolatedModules": true,
"strict": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"noImplicitAny": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"lib": ["es2015", "dom"]
},
"include": ["src"]
}

  1. 配置Webpack

在项目根目录下，创建webpack.config.js文件，添加以下配置项：

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

module.exports = {
mode: 'development',
entry: './src/index.tsx',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
historyApiFallback: true,
hot: true,
},
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html',
}),
],
module: {
rules: [
{
test: /.(js|jsx|tsx|ts)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react', '@babel/preset-typescript'],
},
},
},
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [require('autoprefixer')],
},
},
{
loader: 'less-loader',
options: {
lessOptions: {
modifyVars: {
'primary-color': '#f70',
},
javascriptEnabled: true,
},
},
},
],
},
{
test: /.(png|svg|jpg|gif)$/,
use: ['file-loader'],
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader'],
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
},
};
```

  1. 编写代码

在src目录下编写代码。

示例：

```typescript
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { Button } from 'antd';
import './index.less';

interface IState {
count: number;
}

const reducer = (state: IState = { count: 0 }, action: any) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'DECREMENT':
return { ...state, count: state.count - 1 };
default:
return state;
}
};

const store = createStore(reducer);

const App = () => {
const [count, setCount] = useState(0);

 return (
   <div>
     <Button onClick={() => setCount(count + 1)}>Click Me</Button>
     <p>You clicked {count} times.</p>
   </div>
 );

};

ReactDOM.render(


,
document.getElementById('root'),
);
```

  1. 打包代码

在命令行中执行以下命令，打包代码：

bash
npx webpack

运行完这个命令后，Webpack将会根据配置文件和指定的入口文件将代码打包到dist目录下。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：教你使用webpack打包编译TypeScript代码 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • golang、python、php、c++、c、java、Nodejs性能对比

    Golang、Python、PHP、C++、C、Java、Node.js性能对比 在选择一种编程语言时，性能通常是衡量其优缺点的重要标准之一。在本文中，我们将比较Golang、Python、PHP、C++、C、Java和Node.js的性能。我们将以以下方式进行比较： 编写测试脚本，测试各种语言的运行时间； 对各种语言的内存消耗进行比较； 观察并解释运行脚本…

    node js 2023年6月8日
    00

  • NodeJs实现定时任务的示例代码

    首先需要了解一些基础概念： Node.js是一个基于Chrome V8引擎的JavaScript运行环境，可以用它来开发一些高并发的Web服务。Node.js有各种各样的模块，其中有一个名为node-cron的模块，我们可以通过这个模块实现定时任务。 下面是一个示例代码： const cron = require(‘node-cron’); const ex…

    node js 2023年6月8日
    00

  • 详解Node.js异步处理的各种写法

    详解Node.js异步处理的各种写法 什么是异步处理 在Node.js中，异步处理是指在JavaScript代码中，处理I/O操作和其他耗时的操作时，应该尽可能的避免阻塞I/O和JavaScript线程。在Node.js中，异步操作是通过回调函数和事件来实现的。 回调函数 回调函数是一种在异步代码中通知结果的机制。当异步操作完成时，将调用回调函数来获得异步操…

    node js 2023年6月8日
    00

  • Vue.js项目部署到服务器的详细步骤

    下面来详细讲解“Vue.js项目部署到服务器的详细步骤”。 1. 前置条件 在进行 Vue.js 项目部署之前，需要在服务器上安装 Node.js 和 Git 工具。如果你的服务器已经安装过了，那么可以跳过此步骤。 安装 Node.js： # 安装 Node.js sudo apt-get update sudo apt-get install nodejs…

    node js 2023年6月8日
    00

  • Node.js的文件权限及读写flag详解

    一、文件权限 文件权限分为三个方面：读、写、执行。这些权限的挂靠分为三级：文件拥有者、文件所属组、其他用户。 文件拥有者权限: 用户如果是文件的拥有者，则其拥有读写和执行并可设置其他用户或组权限的权限。改变此文件的所有者时，此操作只能由root或该文件的原始所有者进行。 文件所属组权限: 比如一个文件组为web，那么所有web组的用户或者root用户都可以读…

    node js 2023年6月8日
    00

  • nodejs 实现模拟form表单上传文件

    当我们需要在前后端进行文件上传时，可以使用form表单来实现。而如果使用nodejs进行模拟上传，可以通过如下步骤实现： 1. 安装依赖包 首先需要安装 http, fs, path, formidable 等依赖包，其中 formidable 是一个流行的上传文件解析库。 可以通过 npm 安装： npm install http fs path form…

    node js 2023年6月8日
    00

  • Node.js对MySQL数据库的增删改查实战记录

    Node.js对MySQL数据库的增删改查实战记录 前言 在使用Node.js开发Web应用时，使用MySQL数据库进行数据存储是非常普遍的实践。本文将为大家介绍如何使用Node.js对MySQL数据库进行增删改查的实战记录，希望对大家有所帮助。 准备工作 安装Node.js和MySQL数据库，并保证两者配置正确； 安装MySQL Node.js驱动：npm…

    node js 2023年6月8日
    00

  • Nodejs实现用户注册功能

    下面是Nodejs实现用户注册功能的完整攻略： 1. 创建注册页面 首先需要创建一个注册页面，可以使用HTML、CSS、JavaScript创建。在HTML表单中包含用户名、密码、邮箱等输入框，以及提交按钮等元素。这里举一个HTML页面创建代码的例子： <!DOCTYPE html> <html> <head> <t…

    node js 2023年6月8日
    00
合作推广
合作推广
分享本页
返回顶部