• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

TypeScript打包

 webpack整合

通常情况下,实际开发中我们都需要使用构建工具对代码进行打包;

TS同样也可以结合构建工具一起使用,下边以webpack为例介绍一下如何结合构建工具使用TS;

步骤如下:

初始化项目

进入项目根目录,执行命令 npm init -y,创建package.json文件

下载构建工具

命令如下:

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

共安装了7个包:

  • webpack:构建工具webpack
  • webpack-cli:webpack的命令行工具
  • webpack-dev-server:webpack的开发服务器
  • typescript:ts编译器
  • ts-loader:ts加载器,用于在webpack中编译ts文件
  • html-webpack-plugin:webpack中html插件,用来自动创建html文件
  • clean-webpack-plugin:webpack中的清除插件,每次构建都会先清除目录

配置webpack

根目录下创建webpack的配置文件webpack.config.js

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

module.exports = {
   optimization:{
       minimize: false // 关闭代码压缩,可选
   },

   entry: "./src/index.ts",

   devtool: "inline-source-map",

   devServer: {
       contentBase: './dist'
   },

   output: {
       path: path.resolve(__dirname, "dist"),
       filename: "bundle.js",
       environment: {
           arrowFunction: false // 关闭webpack的箭头函数,可选
       }
   },

   resolve: {
       extensions: [".ts", ".js"]
   },

   module: {
       rules: [
           {
               test: /\.ts$/,
               use: {
                   loader: "ts-loader"     
               },
               exclude: /node_modules/
           }
       ]
   },

   plugins: [
       new CleanWebpackPlugin(),
       new HtmlWebpackPlugin({
           title:'TS测试'
       }),
   ]
}

配置TS编译选项

根目录下创建tsconfig.json,配置可以根据自己需要

{
   "compilerOptions": {
       "target": "ES2015",
       "module": "ES2015",
       "strict": true
   }
}

修改package.json配置

修改package.json添加如下配置

{
   ...
   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "build": "webpack",
       "start": "webpack serve --open chrome.exe"
   },
   ...
}

项目使用

在src下创建ts文件,并在并命令行执行npm run build对代码进行编译;

或者执行npm start来启动开发服务器;

Babel

    除了webpack,开发中还经常需要结合babel来对代码进行转换;

以使其可以兼容到更多的浏览器,在上述步骤的基础上,通过以下步骤再将babel引入到项目中;

虽然TS在编译时也支持代码转换,但是只支持简单的代码转换;

对于例如:Promise等ES6特性,TS无法直接转换,这时还要用到babel来做转换;

安装依赖包:

npm i -D @babel/core @babel/preset-env babel-loader core-js

共安装了4个包,分别是:

  • @babel/core:babel的核心工具
  • @babel/preset-env:babel的预定义环境
  • @babel-loader:babel在webpack中的加载器
  • core-js:core-js用来使老版本的浏览器支持新版ES语法

修改webpack.config.js配置文件

module: {
    rules: [
        {
            test: /\.ts$/,
            use: [
                {
                    loader: "babel-loader",
                    options:{
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "targets":{
                                        "chrome": "58",
                                        "ie": "11"
                                    },
                                    "corejs":"3",
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader",
                }
            ],
            exclude: /node_modules/
        }
    ]
}

如此一来,使用ts编译后的文件将会再次被babel处理;

使得代码可以在大部分浏览器中直接使用;

同时可以在配置选项的targets中指定要兼容的浏览器版本;

到此这篇关于使用webpack打包编译TypeScript代码的文章就介绍到这了,更多相关webpack打包编译TypeScript内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue车牌输入组件使用方法详解发布时间:2022-02-05
下一篇:
js将多维数组转为一维数组后去重排序发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap