文章目录
前言
hello world欢迎来到前端的新世界
😜当前文章系列专栏:webpack
🐱👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力
ts是什么?
TypeScript 是 JavaScript 的超集,为其增加了类型系统,可以编译为普通 JavaScript 代码。这篇指南里我们将会学习是如何将 webpack 和TypeScript 进行集成。
感兴趣的可以去看
ts的介绍以及ts和js的区别
基础配置
首先,执行以下命令安装 TypeScript compiler 和 loader:
javascript
npm install --save-dev typescript ts-loader
现在,我们将修改目录结构和配置文件:
project
javascript
webpack-demo
|- package.json
|- package-lock.json
+ |- tsconfig.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- index.js
+ |- index.ts
|- /node_modules
tsconfig.json
这里我们设置一个基本的配置来支持 JSX,并将 TypeScript 编译到 ES5......
javascript
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node"
}
}
现在,配置 webpack 处理 TypeScript:
webpack.config.js
javascript
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
javascript
- 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 配置中添加下面这行:
javascript
{
"compilerOptions": {
"outDir": "./dist/",
+ "sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node",
}
}
现在,我们需要告诉 webpack 提取这些 source map,并内联到最终的 bundle 中。
webpack.config.js
javascript
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 声明:
javascript
/// <reference types="webpack/module" />
console.log(import.meta.webpack); // 没有上面的声明的话,TypeScript 会抛出一个错误
使用第三方类库
在从 npm 安装 third party library(第三方库) 时,一定要记得同时安装此 library 的类型声明文件(typing definition)。你可以从 TypeSearch 中找到并安装这些第三方库的类型声明文件。
举个例子,如果想安装 lodash 类型声明文件,我们可以运行下面的命令:
javascript
npm install --save-dev @types/lodash
导入其他资源
想要在 TypeScript 中使用非代码资源(non-code asset),我们需要告诉 TypeScript 推断导入资源的类型。在项目里创建一个 custom.d.ts 文件,这个文件用来表示项目中 TypeScript 的自定义类型声明。我们为 .svg 文件设置一个声明:
custom.d.ts
javascript
declare module '*.svg' {
const content: any;
export default content;
}
H 这里,我们通过指定任何以 .svg 结尾的导入(import),将 SVG 声明(declare) 为一个新的模块(module),并将模块的 content 定义为 any。我们可以通过将类型定义为字符串,来更加显式地将它声明为一个 url。同样的概念适用于其他资源,包括 CSS, SCSS, JSON 等。
后言
创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力