webpack 集成 Typescript && Less

TypeScriptJavaScript的一个类型化的超集,可以编译成纯JavaScript,在本指南中,我们将学习如何将Typescriptwebpack集成。

基本设置

为了开始使用webpackTypescript,首先我们必须在我们的项目中安装webpack。 如果您没有这样做,请查看webpack安装指南

要开始使用包含Typescriptwebpack,您需要几件事情:

  • 在您的项目中安装Typescript编译器。
  • 安装一个Typescript加载器(在这种情况下,我们使用的是ts-loader)。
  • 创建一个tsconfig.json文件以包含我们的TypeScript编译配置。
  • 创建webpack.config.js以包含我们的webpack配置。
  • 您可以通过运行以下方法从npm安装TypeScript编译器TypeScript加载器
npm install --save-dev typescript ts-loader

tsconfig.json
tsconfig文件可以作为一个空配置文件启动,在这里可以看到一个基本配置示例,用于将TypeScript编译为es5,并为JSX提供支持。

{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}

您可以在TypeScript文档网站上阅读有关tsconfig.json配置选项的更多信息

webpack.config.js

具有TypeScript配置的基本Webpack应该沿用这些代码:

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.ts'
},
output: {
path: path.resolve(__dirname, "./dist"),
filename: 'bundle/[name].bundle.js'
},
mode:"development",
devtool: 'inline-source-map',
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: "ts-loader"
}
]
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'less-loader'
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
]
};

这里我们将我们的入口点指定为我们当前目录中的index.ts,一个名为bundle.js的输出文件和我们的TypeScript加载器,负责将我们的TypeScript文件编译为JavaScript。 我们还添加resolve.extensions来指示webpack在解析Typescript模块时使用什么文件扩展名。

Typescript loaders

目前有两种可用于TypeScript的loaders:

  • awesome-typescript-loader

  • ts-loader

令人敬畏的TypeScript加载程序创建了一个awesome-typescript-loaderts-loader之间的区别精彩的解释。

您可以在这里阅读更多。 在本指南中,我们将使用ts-loader,因为更容易实现其他Webpack功能,例如将非代码资源导入到项目中。

启用源映射

为了启用源映射,我们首先必须配置TypeScript以将内联源映射输出到我们编译的JavaScript文件中。这通过将sourceMap属性设置为true来完成.

tsconfig.json

{
"sourceMap": true
}

一旦将TypeScript配置为输出源映射,我们需要告诉webpack提取这些源映射并将其传递给浏览器,这样我们就可以在我们的代码编辑器中看到源文件

webpack.config.js

module.exports = {
entry: './index.ts',
output: {
filename: 'bundle.js',
path: __dirname
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: "source-map-loader"
},
{
enforce: 'pre',
test: /\.tsx?$/,
use: "source-map-loader"
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
devtool: 'inline-source-map',
};

首先我们添加一个名为source-map-loader的新加载器。

要安装它运行:

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

一旦加载程序安装,我们需要告诉webpack我们要在任何其他加载程序之前使用enforce:'pre'配置标志来运行这个加载程序。 最后,我们需要通过指定devtool属性来启用webpack中的源映射。 目前我们使用'inline-source-map'设置来阅读有关此设置的更多信息,并查看其他选项,以查看devtool文档

使用第三方库

从npm安装第三方库时,请务必记住安装该库的typing定义。

您可以从@types存储库,安装第三方库定义。

例如,如果我们要安装lodash,我们可以运行以下命令来获取它的输入:

npm install --save-dev @types/lodash

有关更多信息,请参阅此博文

导入非代码部分资源

要使用TypeScript的非代码资源,我们需要告诉TypeScript如何推迟这些导入的类型。

为此,我们需要创建一个custom.d.ts文件。 此文件表示我们项目中TypeScript的自定义定义。

在我们的custom.d.ts文件中,我们需要为svg导入提供一个定义,为此,我们需要将以下内容放在此文件中:

declare module "*.svg" {
const content: any;
export default content;
}

在这里,我们通过指定任何以.svg结尾的导入,为svg声明一个新模块,并将该模块的类型定义为any。 如果我们想要更明确地说这是一个url,我们可以将类型定义为字符串

这不仅适用于svg,而且还适用于您可能希望使用的任何自定义加载器,包括css,scss,json或您可能希望在项目中加载的任何其他文件。

webpack 集成 Typescript && Less的更多相关文章

  1. webpack中typeScript的打包配置

    2018年typescript发展的非常好,js是一门非常灵活的语言,所以一个功能,怎么写都能够写出来,但是这也会导致一个问题,不同人写js的方式不同,那么会导致同一个功能出现的代码风格会迥然不同.这 ...

  2. Captcha服务(后续2)— 改造Captcha服务之Asp.Net Core项目中如何集成TypeScript

    环境准备 .Net Core 版本:下载安装.Net Core SDK,安装完成之后查看sdk版本 ,查看命令dotnet --version,我的版本是2.2.101 IDE: Visual Stu ...

  3. VSCode集成TypeScript编译

    先安装github客户端和nodeJS客户端吧,直接去官网下载,nodeJS客户端安装完就集成了npm; 查看是否成功: git version  node -v npm-v 安装TypeScript ...

  4. webpack 集成 jQuery 和 Avalon

    webpack 系列 三:webpack 如何集成第三方js库 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webp ...

  5. Typescript + TSLint + webpack 搭建 Typescript 的开发环境

    (1)初始化项目 新建一个文件夹“client-side”,作为项目根目录,进入这个文件夹: 我们先使用 npm 初始化这个项目: 这时我们看到了在根目录下已经创建了一个 package.json 文 ...

  6. webpack散记--Typescript

    Typescript 1.js的超集 官网:typescriptlang.org/tslang.cn 来自:微软 安装:官方的  npm i typescript ts-loader --save-d ...

  7. vuejs electron webpack集成使用

    传统的vue SPA页面在浏览器环境中使用,但是有的时候我们还希望能够做成一个类似于桌面的app在PC上使用,希望不仅可以使用所有的浏览器SPA的功能,你也可能外加host os的功能,比如文件的本地 ...

  8. webpack集成vue单文件模式的很多坑(研究了1个星期)

    1.一开始不知道局部安装webpack后,如何调用webpack. 后来看说明文档(webpack中文网)才知道,有个npx可以启动本地安装的webpack. 我估计:全局安装webpack,全局的w ...

  9. 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境

    转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...

随机推荐

  1. 【学习总结】Python-3-身份运算符 is 与 == 区别

    参考:菜鸟教程-Python3运算符 身份运算符 is 和 is not:用于比较两个对象的存储单元 判断两个标识符是不是引用自相同或不同对象,返回一个布尔值 对于"同一个对象"中 ...

  2. css字体的样式与分类用法总结

    字体的样式 color 设置文本的颜色(前景色) ,它会应用到元素的所有边框,除非被 border-color 或另外某个边框颜色属性覆盖. <style> .box1 { color: ...

  3. JavaScript_基础笔记

    javaScript基础:概念:一门客户端脚本语言 运行在客户端浏览器中的,每一个浏览器都有javaScript的解析引擎 脚本语言:不需要编译,直接可以被浏览器解析执行功能区: 可以来增强用户和ht ...

  4. jsonp详细原理之一

    /*script标签是不存在跨域请求的,类似的还有img,background:url,link 你可以想象一下,平时的这些标签都是可以直接引入外部资源的,所以是不存在跨域问题的*/ function ...

  5. (原)centos 防火墙开放端口命令

    centos 防火墙默认是关闭非系统端口的,所以用到非系统端口首先开放,命令如下 firewall-cmd --zone=public --add-port=1935/tcp --permanent ...

  6. hadoop HA集群的安装

    1.hadoop集群规化 ip 主机名 安装软件 角色 运行进程 10.124.147.22 hadoop1 jdk.zookeeper.hadoop namenode/zookeeper/jobhi ...

  7. php 字符转成数字

    1.第一种转换方式:在要转换的变量之前加上用括号括起来的目标类型,如 (int):(bool):(float):(string):(array):(object) 2.第二种转换方式:使用3个具体类型 ...

  8. 51单片机PC程序计数器

    PC是一个16位的计数器.用于存放和指示下一条要执行的指令的地址.寻址范围达64KB.PC有自动加1功能,以实现程序的顺序执行.PC没有地址,是不可寻址的,无法用指令对它进行读写.但在执行转移.调用. ...

  9. Win7 VS2012智能提示显示英文的处理办法

    其原因为.net的语言包没安装成功, 解决方法为 替换自己英文显示的,把C:\Windows\Microsoft.NET\Framework\v2.0.50727\zh-CN 目录的文件,替换到相应的 ...

  10. 【leetcode】945. Minimum Increment to Make Array Unique

    题目如下: Given an array of integers A, a move consists of choosing any A[i], and incrementing it by 1. ...