Webpack4配置TSLoader
是 JavaScript 的⼀个超集，主要提供了类型检查系统和对 ES6 语法的⽀持，但不⽀持新的 API。 ⽬前没有任何环境⽀持运⾏原⽣的TypeScript 代码，必须通过构建把它转换成 JavaScript 代码后才能运⾏。
TypeScript 官⽅提供了能把 TypeScript 转换成 JavaScript 的编译器:typescript 。 你需要在当前项⽬根⽬录下新建⼀个⽤于配置编译选项的 tsconfig.json ⽂件( 不是必须的 )，编译器typescript `默认会读取和使⽤这个⽂件，配置⽂件内容⼤致如下：
{
"compilerOptions":{
"module":"commonjs",// 编译出的代码采⽤的模块规范
"target":"es5",// 编译出的代码采⽤ ES 的哪个版本
"sourceMap":true,// 输出 Source Map ⽅便调试
"importHelpers":true// 减少代码的冗余，类似：@babel/plugin-transform-runtime
},
"exclude":[// 不编译这些⽬录⾥的⽂件
"node_modules"
]
}
通过 npm install typescript -save-dev 安装编译器到本地项⽬
新建⼀个项⽬
|--package.json
|-- tsconfig.js
|-- src
||`-- common.ts
|  |      `-- index.html
|`-- main.ts
`-- fig.js
tsconfig.js 编译器的配置⽂件
// 1.typescript 编译器的配置⽂件：
{
// 2.编译的参数
"compilerOptions":{
"module":"commonjs",// 编译出的代码采⽤的模块规范
"target":"es5",// 编译出的代码采⽤ ES 的哪个版本
"sourceMap":true,// 输出 Source Map ⽅便调试
"importHelpers":true// 减少代码的冗余，类似：@babel/plugin-transform-runtime
},
// 3.排除项
"exclude":[// 不编译这些⽬录⾥的⽂件
"node_modules"
]
}
package.json
{
"name":"testtsloader",
"version":"1.0.0",
"description":"",
"main":"main.js",
"scripts":{
"test":"echo \"Error: no test specified\" && exit 1",
"dev":"webpack --mode development",
"build":"webpack --mode production"
},
"author":"liujun",
"license":"ISC",
"devDependencies":{
"awesome-typescript-loader":"^5.2.1",
"typescript":"^3.5.3",
"webpack":"^4.35.3",
"webpack-cli":"^3.3.6"
webpack打包流程 面试},
"dependencies":{}
}
1.scripts 属性⾥编写了3个脚本：其中 dev 对应的脚本是 构建测试版；其中 build对应的脚本是 构建发布版
2.使⽤的开发依赖有：awesome-typescript-loader typescript webpack webpack-cli
const path =require('path');
entry:'./src/main.ts',
output:{
filename:'bundle.js',
path: solve(__dirname,'./dist'),
},
resolve:{
// 执⾏import { showHelloWorld } from './common';
// 先尝试 ts 后缀的 TypeScript 源码⽂件，在尝试 js 后缀 JavaScript 源码⽂件
extensions:['.ts','.js']
},
module:{
rules:[
{
test:/\.ts$/,
// use:['awesome-typescript-loader']
// 1.该 Loader 是把 TypeScript 转换成 JavaScript, 只负责新语法的转换，新增的API不会⾃动添加polyfill
loader:'awesome-typescript-loader'
}
]
},
devtool:'source-map',// 输出 Source Map ⽅便在浏览器⾥调试 TypeScript 代码
};
use接收⼀个数组，数组中可存放字符串和对象，并且use的别名是 loaders；如果不⽤use也可直写loader main.ts
// 1.通过 CommonJS 规范导⼊ showHelloWorld 函数
import{ showHelloWorld }from'./common';
// 2.执⾏ showHelloWorld 函数
showHelloWorld('Webpack的安装和使⽤');
common.ts
export const showHelloWorld=(content:string)=>{
alert('hello world')
}
// 2.class 定义类也是es6新的语法。⽬的是要把es6新的语法转成es5语法
class Person {
// 定义⼀个变量
private name: string
constructor(name: string){
this.name ='person'
}
testSet(){
}
}
index.html
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导⼊ Webpack 输出的 JavaScript ⽂件-->
<script src="../dist/bundle.js"></script>
</body>
</html>
本地安装 webpack 和 ⽤到的loader
npm install webpack@4.35.3--save-dev
npm install webpack-cli@3.3.6--save-dev
npm install awesome-typescript-loader@5.2.1--save-dev // 负责将 TS 转换成 ES5语法npm install typescript@3.5.3--save-dev  // 负责编译 TS ⽂件为 JS ⽂件
在项⽬的根⽬录，执⾏脚本构建项⽬
npm run dev
打包后输出的结果
|-- dist
||-- bundle.js
||-- bundle.js.map
|-- node_modules
|--package-lock.json
|--package.json
|-- tsconfig.js
|-- src
||-- common.ts
||-- index.html
|`-- main.ts
`-- fig.js
打包之后的 bundle.js ⽂件的部分内容：
/***/"./src/common.ts":
/*!***********************!*\
!*** ./src/common.ts ***!
\***********************/
/*! no static exports found */
/
***/(function(module, exports, __webpack_require__){
"use strict";
Object.defineProperty(exports,"__esModule",{ value:true});
exports.showHelloWorld=function(content){
alert('hello world');
};
// 2.class 定义类也是es6新的语法。⽬的是要把es6新的语法转成es5语法
var Person =/** @class */(function(){
function Person(name){
this.name ='person';
}
stSet=function(){
};
return Person;
}());
/***/}),
/***/"./src/main.ts":
/*!*********************!*\
!*** ./src/main.ts ***!
\*********************/
/*! no static exports found */
/***/(function(module, exports, __webpack_require__){
"use strict";
Object.defineProperty(exports,"__esModule",{ value:true});
// 1.通过 CommonJS 规范导⼊ showHelloWorld 函数
var common_1 =__webpack_require__(/*! ./common */"./src/common.ts");
// 2.执⾏ showHelloWorld 函数
common_1.showHelloWorld('Webpack的安装和使⽤');
/***/})
/******/});
总结：
上⾯fig.js配置中的use通过正则 /.ts$/ 匹配所有以 .ts为后缀的 TS⽂件，再使⽤awesome-typescript-loade 去处理。具体处理流程如下：
1.通过awesome-typescript-loade 把 TypeScript 转换成 JavaScript( 新增的语法会转换为ES5，新增API不会 )

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。