如果项目中使用的是Typescript,那么打包的时候,会和之前有些差异。
下面,我们来看看webpack 中如何配置,来支持Typescript 。
我们先使用命令 npm init 新建一个项目。
然后我们在项目跟目录下新建文件webpack.config.js 与 文件夹 src 。
然后,我们在项目中把webpack 先下载进来:
npm install webpack webpack-cli --save-dev
然后,我们在src 下新建一个typescript 文件 index.ts ,并写入typescript 代码,如下。
class Greeter {
greeting: string;
constructor (message: string) {
this.greeting = message
}
greet() {
return 'hello, ' + this.greeting
}
}
let greeter = new Greeter('world');
let button = document.createElement('button')
button.textContent = 'greeting'
button.onclick = function () {
alert(greeter.greet())
}
document.body.append(button);
上面typescript 代码在浏览器中是无法运行的,因此,现在我们来配置webpack 打包。
const path = require('path')
module.exports = {
entry: './src/index.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
上面是基本的配置,下面我们要配置typescript 对应的loader : ts-loader (typescript 官方提供的loade),可以配置一下它的excludes(node_modules中的文件排除)。
const path = require('path')
module.exports = {
entry: './src/index.ts',
module: {
rules: [{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
当然,我们得安装一下ts-loader 如下。
npm install ts-loader typescript --save-dev
这时,我们执行webpack 打包命名会发现,还是会报错无法成功打包,下面是报错信息。
意思是在使用ts-loader 打包ts 文件的时候,需要tsconfig.json 但它是空的。因此,我们需要在项目中加上这个文件,并做相应配置。
下面我们在项目根目录下创建文件tsconfig.json 。这里我们写上一些最基本的配置项,如下。
{
"compilerOptions": {
"module": "es6",
"target": "es5",
"allowJs": true
}
}
现在,运行打包命令,就可以成功打包了。
当我们在typescript 的项目中,使用其他的库,比如 lodash,可以像写 原生js 一样的引入与使用,但是,那样的话,就丧失了ts类型检测的优点了。我们可以再安装lodash 对应的typescript 里的类型文件,来解决这个问题。
我们安装@type/lodash (它使得typescript 能正确识别lodash 中的一些值的类型...)
npm install @types/lodash --save-dev