webpack中typeScript的打包配置 webpack中typeScript的打包配置

2018年typescript发展的非常好，js是一门非常灵活的语言，所以一个功能，怎么写都能够写出来，但是这也会导致一个问题，不同人写js的方式不同，那么会导致同一个功能出现的代码风格会迥然不同。这样的话，如果是一个团队在做编程的过程中，每个人都按自己的语法去写代码的话，那么维护性就难以得到保证。 typescript是微软推出的一个产品，他规范了一套javascript的语法，当然他也支持原始的javascript语法。通过typescript最大的优势就是可以规范我们的代码。同时typescript因为把我们的代码做了规范，也可以方便的对代码进行报错，提示。所以我们代码写的不规范，会及时的提示给我们。所以总体来说，用typescript来编写我们的代码。可以有效的提升我们js的可维护性。这也是为什么越来越多的公司开始采用typescript的原因，如果使用typescript，对应打包的webpack配置就会有所差异。所以我们看看webpack怎么对typescript进行打包支持。新建一个项目，初始化package.json，安装webpack。typescript的后缀是index.tsx

index.tsx

class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } }let greeter = new Greeter("world"); alert(greeter.greet())

这段代码是官网的例子 http://www.typescriptlang.org/play/index.html。这段代码直接在浏览器里是运行不起来的。需要通过编译，webpack进行配置安装 npm install ts-loader typescript --save-dev
webpack.config.js

const path = require('path'); module.exports = { mode: 'production', entry: './src/index.tsx', module: { rules: [{ test: /\.tsx?$/, // ts-loader是官方提供的处理tsx的文件 use: 'ts-loader', exclude: /node_modules/ }] }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }

package.json

"scripts": { "build": "webpack" },

运行npm run build。这样是否打包成功了，打包试试，发现报错了，如下

文章图片

提示说缺少一个tsconfig.json文件。

tsconfig.json { "compilerOptions": { "outDir": "./dist", // 这块写不写都可以，webpack.config.js里面已经配置了output "module": "es6", // 指的是用的es module的引入方式 "target": "es5", // 指的是打包成es5代码 "allowJs": true, // 允许tsx引入js文件 } }

配置好之后，再运行npm run build。发现打包成功了，出现了dist,bundle.js。这个时候将bundle.js复制到控制太，能弹出hello world。说明打包生成的文件没有任何问题。

用typescript有什么好处 1、Greeter里面必须传一个字符串的内容，但假设传递123。在代码里就会报错。使用ts后，代码就更严谨了。就可以使我们的代码有效的避免一些错误。更严谨规范的写代码。 2、我安装了lodash。在tsx里面import _ from 'lodash'; 发现报错了，我们需要安装lodash对应的ts类型文件。 npm install @types/lodash --save-dev 意思是去ts里面使用lodash。这个时候在tsx里面提示不能直接引入。ts里面去引入需要 import * as _ from 'lodash' 去引入所有的内容 index.tsx

import * as _ from 'lodash'; class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return _.join(['Hello,',this.greeting], ''); } }let greeter = new Greeter('world'); alert(greeter.greet())

所以在写ts的时候，在写代码的时候就会报错，从而更快的发现问题。
3、我怎么知道哪些库有对应的ts,types呢
https://microsoft.github.io/TypeSearch/ 在这个网址去搜索，有的话就可以安装相应的文件模块的名字。 @types/... 【webpack中typeScript的打包配置】转载于:https://www.cnblogs.com/wzndkj/p/10873402.html