typeScript的webpack配置
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>先上最终代码</li><li>初始化</li><li>写一段ts代码</li><li>webpack配置<ul><li><ul><li>需要安装的依赖</li><li>代码</li><li>tsconfig.json配置<ul><li>在tsx中使用js的模块引入方式</li></ul></li><li>使用第三方模块</li></ul></li></ul></li></ul></div><p></p><h1 id="先上最终代码">先上最终代码</h1>
<p><img src="https://img2020.cnblogs.com/blog/1609498/202008/1609498-20200809130123062-1743273887.png" alt="" loading="lazy"></p>
<p>webpack.config.js</p>
<pre><code>const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.tsx',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/ //表示node_modules中的tsx文件不做处理
}
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
</code></pre>
<p>tsconfig.json</p>
<pre><code>{
"compilerOptions": {
"outDir": "./dist",
"module": "es6",
"target": "es5",
"allowJs": true,
"allowSyntheticDefaultImports": true
}
}
</code></pre>
<p>package.json</p>
<pre><code>{
"name": "ts_webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "zhangmiao",
"license": "ISC",
"devDependencies": {
"ts-loader": "^8.0.2",
"typescript": "^3.9.7",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"@types/lodash": "^4.14.159",
"lodash": "^4.17.19"
}
}
</code></pre>
<hr>
<h1 id="初始化">初始化</h1>
<pre><code>npm install -y
npm install webpack webpack-cli --save-dev
</code></pre>
<h1 id="写一段ts代码">写一段ts代码</h1>
<pre><code>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="say hello";
button.onclick=function(){
alert(greeter.greet());
}
document.body.appendChild(button);
</code></pre>
<p>这段代码就是一个点击say hello按钮，然后弹出hello world的小demo。<br>
当然这段代码放在浏览器上肯定是无法直接执行的，所以我们需要将他进行打包。接下来就是配置webpack，使这段代码可以运行起来。</p>
<h1 id="webpack配置">webpack配置</h1>
<h3 id="需要安装的依赖">需要安装的依赖</h3>
<ul>
<li>ts-loader</li>
<li>typescript</li>
</ul>
<pre><code>npm install ts-loader typescript --save-dev
</code></pre>
<h3 id="代码">代码</h3>
<p>在package.json中配置打包命令</p>
<pre><code>"scripts": {
"build":"webpack"
},
</code></pre>
<p>在webpack中配置：</p>
<pre><code>const path=require('path');
module.exports={
mode:'production',
entry:'./src/index.tsx',
module:{
rules:[
{
test:/\.tsx?$/,
use:'ts-loader',
exclude:/node_modules/ //表示node_modules中的tsx文件不做处理
}
]
},
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
}
}
</code></pre>
<p>其实要使用一种语法，不论是css,ts,less都是一样的套路，引入对应的文件，在module里面配置对应的loader，一般就可以正常的打包了。<br>
我们先来打包试一下<code>npm run build</code></p>
<p>结果出现报错：</p>
<pre><code>Module build failed (from ./node_modules/_ts-loader@8.0.2@ts-loader/index.js):
Error: error while parsing tsconfig.json
</code></pre>
<p>这段代码的解决办法是在文件的根目录下创建一个<code>tsconfig.json</code>的文件。</p>
<h3 id="tsconfigjson配置">tsconfig.json配置</h3>
<pre><code>{
"compilerOptions":{
"outDir": "./dist",
"module": "es6",
"target": "es5",
"allowJs": true,
"allowSyntheticDefaultImports": true
}
}
</code></pre>
<p>这里配置了一些常用的配置项</p>
<ul>
<li>outDir：当使用<code>loader</code>打包tsx文件时，打包文件会放在这个配置项配置的目录下。</li>
<li>module：指的是我们使用的是ES module的方式引入</li>
<li>target：这个指的是我们最终打包的时候，需要把typescript转化为什么样的形式。写es5可以打包成es5的语法,在大部分浏览器上都可以运行。</li>
<li>allowJs：表示可以在ts的语法中引入js这样的模块或文件。</li>
</ul>
<h4 id="在tsx中使用js的模块引入方式">在tsx中使用js的模块引入方式</h4>
<p>在tsx中，我们这样引入react：</p>
<pre><code>import * as React from 'react'
</code></pre>
<p>在js中我们这样引入</p>
<pre><code>import React,{Component, useState} from 'react'
</code></pre>
<p><code>allowSyntheticDefaultImports:true</code>是为了使我们可以在tsx中像在js中一样引入模块。当然，也可以不配置这一项，继续使用tsx的引入方式即可。</p>
<p>我们再进行打包，<code>npm run build</code>。打包成功。</p>
<p>我们进入dist目录下的bundle.js文件，复制里面的js，到浏览器的控制台中运行，可以检测一下是否出错。</p>
<h3 id="使用第三方模块">使用第三方模块</h3>
<p>比如我们现在使用lodash，<code>npm install lodash --save</code>。</p>
<pre><code>import _ from 'lodash'
class Greeter{
greeting:string;
constructor(message:string){
this.greeting=message;
}
greet(){
return _.join(["Hello,",this.greeting],'');
// return "Hello,"+this.greeting;
}
}
let greeter=new Greeter('world');
let button=document.createElement('button');
button.textContent="say hello";
button.onclick=function(){
alert(greeter.greet());
}
document.body.appendChild(button);
</code></pre>
<p><code>return _.join(["Hello,",this.greeting],'');</code>这样写是没有什么问题的，就做了一个字符串拼接。但是当我们在_.join中什么不写或者使用一些有问题的写法的时候:<code>return _.join();</code>。这时你会发现它没有报错也没有提示。这和ts优秀的静态检查是相违背的，我们希望它能将第三方模块的语法也能一并检查了。方法是引入第三方模块的类型说明文件，比如：</p>
<pre><code>npm install @types/lodash --save--dev
</code></pre>
<p>我们可以在<code>https://microsoft.github.io/TypeSearch/</code>中搜索这个第三方模块是否有类型说明文件。<br>
<img src="https://img2020.cnblogs.com/blog/1609498/202008/1609498-20200809130102306-1945303447.png" alt="" loading="lazy"></p>
<hr>
<p>结束</p><br><br>
来源：https://www.cnblogs.com/ellen-mylife/p/13462353.html
頁:
[1]