继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

由浅入深 webpack (一) 编译 Typescript

menghuanbaolei
关注TA
已关注
手记 1
粉丝 13
获赞 4

实战课程: 《四大维度 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

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


成功图片展示效果

https://img2.mukewang.com/5b75506500010b7b10450294.jpg


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


打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP