webpack4 自學筆記二（typescript的配置）

所有的代碼及筆記均可以在個人github上查看， 喚醒star： https://github.com/Jasonwang911/webpackStudyInit/tree/master/typescriptConfig

 

1. TS: js的超集 tslang.cn/typescriptlang.org

2. typesscript-loader 有兩個

ts-loader 官方維護

awesome-typesctipt-loader 我的維護，運用了緩存，速度更快

3. 配置在 tsconfig.json 文件中

官網中： 官網/docs/handbook/compiler-options.html 查看相關具體配置

經常使用選項：

compilerOptions

include

exculde

4. 安裝環境

sudo npm install typescript -g

npm install webpack typescript ts-loader awesome-typescript-loader --save-dev

在我安裝依賴的時候出現 項目中 typesctipt 下載失敗的狀況，此時由於全局安裝有 typescript ，能夠直接連接過來，使用命令

npm link typescript

5. 配置webpack.config.js文件

module.exports = {
    mode: 'development',
    entry: {
        'app': './src/app.ts'
    },
    output: {
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    },
    devtool: 'source-map',
}

 

6. 配置tsconfig.json配置文件(注意json文件不能夠寫註釋，請自行去掉註釋)

{
    "compilerOptions": {
        // 包含es6 es7 和commonjs
        "module": "commonjs", 
        // 目標運行環境
        "target": "es5",
        // 是否是容許 js語法 
        "allowJs": true,
    },
    "include": [
        "./src/*"
    ],
    "exclude": [
        "./node_modules"
    ]
}

 

7. 使用第三方庫的聲明文件（校驗第三方庫文件的數據類型）

npm install @types/lodash

npm install @types/vue

。。。。

或者使用 Typings

a.全局安裝 sodu npm install typings -g

b.使用typings 安裝 typings install lodash --save 安裝完成後會自動生成 typings.json 配置文件和 typings 文件夾

c.在tsconfig.json文件中添加 typeRoots 配置

 

{
    "compilerOptions": {
        "module": "commonjs", 
        "target": "es5",
        "allowJs": true,
        "typeRoots": [
            "./node_modules/@types",
            "./typings/modules"
        ]
    },
    "include": [
        "./src/*"
    ],
    "exclude": [
        "./node_modules"
    ]
}