webpack中typeScript的打包配置
<div>2018年typescript发展的非常好，js是一门非常灵活的语言，所以一个功能，怎么写都能够写出来，但是这也会导致一个问题，不同人写js的方式不同，那么会导致同一个功能出现的代码风格会迥然不同。这样的话，如果是一个团队在做编程的过程中，每个人都按自己的语法去写代码的话，那么维护性就难以得到保证。</div><div> </div>
<div>typescript是微软推出的一个产品，他规范了一套javascript的语法，当然他也支持原始的javascript语法。通过typescript最大的优势就是可以规范我们的代码。</div>
<div> </div>
<div>同时typescript因为把我们的代码做了规范，也可以方便的对代码进行报错，提示。所以我们代码写的不规范，会及时的提示给我们。所以总体来说，用typescript来编写我们的代码。可以有效的提升我们js的可维护性。</div>
<p>这也是为什么越来越多的公司开始采用typescript的原因，如果使用typescript，对应打包的webpack配置就会有所差异。所以我们看看webpack怎么对typescript进行打包支持。新建一个项目， 初始化package.json，安装webpack。typescript的后缀是index.tsx</p>
<p> </p>
<div>index.tsx</div>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">class Greeter {
greeting: string;
constructor(message: string) {
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.greeting =<span style="color: rgba(0, 0, 0, 1)"> message;
}
greet() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> "Hello, " + <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.greeting;
}
}
let greeter </span>= <span style="color: rgba(0, 0, 255, 1)">new</span> Greeter("world"<span style="color: rgba(0, 0, 0, 1)">);
alert(greeter.greet())</span></pre>
</div>
<p> </p>
</div>
<div>这段代码是官网的例子http://www.typescriptlang.org/play/index.html。这段代码直接在浏览器里是运行不起来的。需要通过编译，webpack进行配置</div>
<div>安装<strong> npm install ts-loader typescript --save-dev</strong></div>
<p> </p>
<div>webpack.config.js</div>
<div>
<div class="cnblogs_code">
<pre>const path = require('path'<span style="color: rgba(0, 0, 0, 1)">);
module.exports </span>=<span style="color: rgba(0, 0, 0, 1)"> {
mode: </span>'production'<span style="color: rgba(0, 0, 0, 1)">,
entry: </span>'./src/index.tsx'<span style="color: rgba(0, 0, 0, 1)">,
module: {
rules: [{
test: </span>/\.tsx?$/<span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> ts-loader是官方提供的处理tsx的文件</span>
use: 'ts-loader'<span style="color: rgba(0, 0, 0, 1)">,
exclude: </span>/node_modules/<span style="color: rgba(0, 0, 0, 1)">
}]
},
output: {
filename: </span>'bundle.js'<span style="color: rgba(0, 0, 0, 1)">,
path: path.resolve(__dirname, </span>'dist'<span style="color: rgba(0, 0, 0, 1)">)
}
}</span></pre>
</div>
<p>package.json</p>
</div>
<div>
<div class="cnblogs_code">
<pre>"scripts"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"build": "webpack"<span style="color: rgba(0, 0, 0, 1)">
},</span></pre>
</div>
<p>运行npm run build。这样是否打包成功了，打包试试，发现报错了，如下</p>
</div>
<p><img src="https://img2018.cnblogs.com/blog/331769/201905/331769-20190516070239608-952114919.png" alt=""></p>
<p>提示说缺少一个tsconfig.json文件。</p>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">tsconfig.json
{
</span> "compilerOptions"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"outDir": "./dist", <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 这块写不写都可以，webpack.config.js里面已经配置了output</span>
"module": "es6", <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 指的是用的es module的引入方式</span>
"target": "es5", <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 指的是打包成es5代码</span>
"allowJs": <span style="color: rgba(0, 0, 255, 1)">true</span>, <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 允许tsx引入js文件</span>
<span style="color: rgba(0, 0, 0, 1)">}
}</span></pre>
</div>
<p>配置好之后，再运行npm run build。发现打包成功了，出现了dist,bundle.js。这个时候将bundle.js复制到控制太，能弹出hello world。说明打包生成的文件没有任何问题。</p>
</div>
<p> <br><br></p>
<div>用typescript有什么好处</div>
<div>1、Greeter里面必须传一个字符串的内容，但假设传递123。在代码里就会报错。使用ts后，代码就更严谨了。就可以使我们的代码有效的避免一些错误。<strong>更严谨规范的写代码。</strong></div>
<div>2、我安装了lodash。在tsx里面import _ from 'lodash';发现报错了，我们需要安装lodash对应的ts类型文件。</div>
<div><strong>npm install @types/lodash --save-dev</strong></div>
<div>意思是去ts里面使用lodash。这个时候在tsx里面提示不能直接引入。ts里面去引入需要 import * as _ from 'lodash' 去引入所有的内容</div>
<div>index.tsx</div>
<div>
<div class="cnblogs_code">
<pre>import * as _ from 'lodash'<span style="color: rgba(0, 0, 0, 1)">;
class Greeter {
greeting: string;
constructor(message: string) {
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.greeting =<span style="color: rgba(0, 0, 0, 1)"> message;
}
greet() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> _.join(['Hello,',<span style="color: rgba(0, 0, 255, 1)">this</span>.greeting], ''<span style="color: rgba(0, 0, 0, 1)">);
}
}
let greeter </span>= <span style="color: rgba(0, 0, 255, 1)">new</span> Greeter('world'<span style="color: rgba(0, 0, 0, 1)">);
alert(greeter.greet())</span></pre>
</div>
<p>所以在写ts的时候，<strong>在写代码的时候就会报错，从而更快的发现问题。</strong></p>
</div>
<p>3、我怎么知道哪些库有对应的ts,types呢</p>
<div>https://microsoft.github.io/TypeSearch/</div>
<div>在这个网址去搜索，有的话就可以安装相应的文件模块的名字。<strong>@types/...</strong></div><br><br>
来源：https://www.cnblogs.com/wzndkj/p/10873402.html
頁:
[1]