由浅入深 webpack （一） 编译 Typescript

实战课程： 《四大维度 Webpack 前端工程化》编译 Typescript 笔记

Typescript 

    JS的超集（意思是它的全集里面是包括js的，直接在typescript里面写js都没问题）

官网：

    typescriptlang.org（英文官网） / tslang.cn（中文官网）

使用：

    typescript-loader（webpack中 使用 typescript 需要 typescript-loader）

安装

npm i typescript ts-loader -D
npm i typescript awesome-typescript-loader -D

    ∴ 两个选择一个即可

    ∵ 学习用的是 webpack3，下载时最好指定 @3 版本

    ∴  PS：  npm i typescript@3 ts-loader@3 -D

配置（在根目录）

    tsconfig.json 

        配置链接：https://www.tslang.cn/docs/handbook/compiler-options.html

        常用选项：compilerOptions, include, exclude    

    webpack.config.js

        下文有源码

npm install

npm init -y
npm i webpack@3 typescript@3 ts-loader@3 awesome-typescript-loader@3 -D

新建文件：

mkdir创建一个目录，touch 在新建一个文件

    ∵  touch 在 window 可能不支持

    ∴  可以自己手动新建目录和文件

mkdir src
touch webpack.config.js
touch ts.config.json
touch src/app.ts

webpack.config.js

module.exports = {
    entry: {
        'app': './src/app.ts'
    },

    output: {
        filename: '[name].bundle.js'
    },

    module: {
        rules: [{
            test: /\.tsx?$/,
            use: {
                loader: 'ts-loader'
            }
        }]
    }
}

ts.confg.json

{
  "compilerOptions": {     // 编译选项
    "module": "commonjs",   // 包含 es6 module, es7 module 和 他自己
    "target": "es5",        // 编译成 es5
    "allowJs": true         // 允许使用 js
  },

  "include": [            // 编译路径
    "./src/*"
  ],

  "exclude": [            // 不包括路径
    "./node_modules"
  ]
}

app.ts

const NUM = 45

interface Cat {
    name: String,
    gender: String
}

function touchCat(cat: Cat) {
    console.log('miao~', cat.name)
}

touchCat({
    name: 'tomu',
    gender: 'male'
})

好了，这样就好了，命令行测试:

webpack

这样就可以看到打包成功了。

成功图片展示效果

PS：如果报错，请看下 install 的插件有没有指定版本为 @3。

∵ 因为默认下载是最新的版本， webpack现在最新的是 webpack4，必须安装对等依赖项，版本变更容易导致的语法错误。

∴  所以要指定版本 @3。

划重点：版本的更新都是循环渐进的，不学会走哪能学会跑，所以不要惶恐都更新换代到 webpack 4版本

到时候会发现，webpack 4 其实也很简单

github 源码链接：

https://github.com/meng-Macbook/myWebpack/tree/master/deep03

PS：git clone 下来 npm install  后可直接运行

题外：

    typings  声明文件

    有些时候打包完成，代码出错可是不报错，代码运行不起来怎么办

    可以使用 typings，现在最新的是@3，所以我们可以默认安装。推荐使用 ts-loader@3，@2版本使用起来比较麻烦

安装：

npm i typings -g

如果使用的 package 是一个模块，可以直接安装：

typings install lodash --save

如果我们想加载 jquery 之类，或者未进行 module defined 的声明文件：

typings install dt~jquery --global --save

如果想搜索可用的jquery的声明文件：

typings search jquery