郑州做营销型网站建设,最吸引人的引流话术,免费公司起名网大全,湖南建设监理协会网站文章目录 前言ts是什么#xff1f;基础配置LoaderSource MapsClient types使用第三方类库导入其他资源 后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;webpack #x1f431;#x1f453;博主在前端领域还有很多知识和技术需要掌握… 文章目录 前言ts是什么基础配置LoaderSource MapsClient types使用第三方类库导入其他资源 后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏webpack 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 ts是什么
TypeScript 是 JavaScript 的超集为其增加了类型系统可以编译为普通 JavaScript 代码。这篇指南里我们将会学习是如何将 webpack 和TypeScript 进行集成。
感兴趣的可以去看 ts的介绍以及ts和js的区别
基础配置
首先执行以下命令安装 TypeScript compiler 和 loader
npm install --save-dev typescript ts-loader现在我们将修改目录结构和配置文件
project webpack-demo|- package.json|- package-lock.json|- tsconfig.json|- webpack.config.js|- /dist|- bundle.js|- index.html|- /src|- index.js|- index.ts|- /node_modulestsconfig.json
这里我们设置一个基本的配置来支持 JSX并将 TypeScript 编译到 ES5……
{compilerOptions: {outDir: ./dist/,noImplicitAny: true,module: es6,target: es5,jsx: react,allowJs: true,moduleResolution: node}
}现在配置 webpack 处理 TypeScript
webpack.config.js
const path require(path);module.exports {entry: ./src/index.ts,module: {rules: [{test: /\.tsx?$/,use: ts-loader,exclude: /node_modules/,},],},resolve: {extensions: [.tsx, .ts, .js],},output: {filename: bundle.js,path: path.resolve(__dirname, dist),},
};这会让 webpack 直接从./index.ts进入然后通过 ts-loader 加载所有的 .ts 和 .tsx 文件并且在当前目录输出一个 bundle.js 文件。
现在让我们改变lodash在 ./index.ts 文件中的引入 因为在 lodash 的定义中没有默认(default)的导出。
./index.ts
- import _ from lodash;import * as _ from lodash;function component() {const element document.createElement(div);element.innerHTML _.join([Hello, webpack], );return element;}document.body.appendChild(component());Tip 如果想在 TypeScript 中保留如import _ from ‘lodash’;的语法被让它作为一种默认的导入方式需要在文件 tsconfig.json 中设置 “allowSyntheticDefaultImports” : true 和 “esModuleInterop” : true 。这个是与 TypeScript 相关的配置在本文档中提及仅供参考。 Loader
在本指南中我们使用 ts-loader因为它能够很方便地启用额外的 webpack 功能例如将其他 web 资源导入到项目中。 Warning ts-loader 使用 TypeScript 编译器 tsc 并依赖于您的 tsconfig.json 配置文件。请确保避免将module设置为CommonJS否则Webpack将无法进行代码摇树优化tree-shaking 请注意如果您已经在使用 babel-loader 来转译您的代码您可以使用 babel/preset-typescript 来让Babel处理您的JavaScript和TypeScript文件而无需使用额外的加载器。请记住与ts-loader相反底层的 babel/plugin-transform-typescript 插件不会执行任何类型检查。
Source Maps
想要启用 source map我们必须配置 TypeScript以将内联的 source map 输出到编译后的 JavaScript 文件中。必须在 TypeScript 配置中添加下面这行 {compilerOptions: {outDir: ./dist/,sourceMap: true,noImplicitAny: true,module: commonjs,target: es5,jsx: react,allowJs: true,moduleResolution: node,}}现在我们需要告诉 webpack 提取这些 source map并内联到最终的 bundle 中。
webpack.config.js const path require(path);module.exports {entry: ./src/index.ts,devtool: inline-source-map,module: {rules: [{test: /\.tsx?$/,use: ts-loader,exclude: /node_modules/,},],},resolve: {extensions: [ .tsx, .ts, .js ],},output: {filename: bundle.js,path: path.resolve(__dirname, dist),},};Client types
你可以在 TypeScript 代码中使用 webpack 特定的特性比如 import.meta.webpack。并且 webpack 也会为它们提供类型支持只需要添加一个 TypeScript reference 声明
/// reference typeswebpack/module /
console.log(import.meta.webpack); // 没有上面的声明的话TypeScript 会抛出一个错误使用第三方类库
在从 npm 安装 third party library(第三方库) 时一定要记得同时安装此 library 的类型声明文件(typing definition)。你可以从 TypeSearch 中找到并安装这些第三方库的类型声明文件。
举个例子如果想安装 lodash 类型声明文件我们可以运行下面的命令
npm install --save-dev types/lodash导入其他资源
想要在 TypeScript 中使用非代码资源(non-code asset)我们需要告诉 TypeScript 推断导入资源的类型。在项目里创建一个 custom.d.ts 文件这个文件用来表示项目中 TypeScript 的自定义类型声明。我们为 .svg 文件设置一个声明 custom.d.ts
declare module *.svg {const content: any;export default content;
}H 这里我们通过指定任何以 .svg 结尾的导入(import)将 SVG 声明(declare) 为一个新的模块(module)并将模块的 content 定义为 any。我们可以通过将类型定义为字符串来更加显式地将它声明为一个 url。同样的概念适用于其他资源包括 CSS, SCSS, JSON 等。
后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
