用TypeScript開發手勢庫 - (2)tsconfig.json & rollup.config.js & npx

any-touch 一個手勢庫

往期目錄

用 TypeScript 開發手勢庫 - (1)web開發經常使用手勢有哪些?

用 TypeScript 開發手勢庫 - (3)統一化Mouse和Touch事件

不到30行, 用any-touch實現一個drawer

標題有點長

今天的標題有點長, 但不難, 講的都是工具配置和使用, 就3個知識點:

1. 如何配置tsconfig.json
2. 如何配置rollup.config.js
3. 使用npx運行項目所在node_modules的命令

rollup.config.js

注: 爲了閱讀體驗, 我把爲何不用webpack放在的本文的最後. 我對代碼作了註釋(若有不懂請留言):

// 爲了讓rollup識別commonjs類型的包,默認只支持導入ES6
import commonjs from 'rollup-plugin-commonjs';
// 爲了支持import xx from 'xxx'
import nodeResolve from 'rollup-plugin-node-resolve';
// ts轉js的編譯器
import typescript from 'rollup-plugin-typescript';
// 支持加載json文件
import json from 'rollup-plugin-json';
// 支持字符串替換, 好比動態讀取package.json的version到代碼
import replace from 'rollup-plugin-replace';
// 讀取package.json
import pkg from './package.json';
// 代碼生成sourcemaps
import sourceMaps from 'rollup-plugin-sourcemaps'

// 代碼頭
const banner =
    `/*! * AnyTouch.js v${pkg.version} * (c) 2018-${new Date().getFullYear()} Russell * https://github.com/any86/any-touch * Released under the MIT License. */`

export default {
    input: './src/main.ts',
    plugins: [
        // 代碼中的__VERSION__字符串會被package.json中的version字段所替代
        replace({
            __VERSION__: pkg.version
        }),

        typescript({
            exclude: 'node_modules/**',
            typescript: require('typescript'),

        }),
        json(),
        nodeResolve({
            jsnext: true,
            main: true
        }),

        commonjs({
            include: 'node_modules/**'
        }),

        sourceMaps()

    ],
    output: [{
            format: 'cjs',
            // 生成的文件名和路徑
            // package.json的main字段, 也就是模塊的入口文件
            file: pkg.main, 
            banner,
            sourcemap: true
        },
        {
            format: 'es',
            // rollup和webpack識別的入口文件, 若是沒有該字段, 那麼會去讀取main字段
            file: pkg.module,
            banner,
            sourcemap: true
        },
        {
            format: 'umd',
            name: 'AnyTouch',
            file: pkg.browser,
            banner,
            sourcemap: true
        }
    ]
};
複製代碼

源碼

tsconfig.js

{
    "compilerOptions": {
        // 容許未執行的代碼不報錯
        "allowUnreachableCode": true,
        // 嚴格模式, 強烈建議開啓
        "strict": true,
        // 支持別名導入:
        // import * as React from "react"
        "esModuleInterop": true,
        // 目標js的版本
        "target": "es5",
        // 目標代碼的模塊結構版本
        "module": "es6",
        // 在表達式和聲明上有隱含的 any類型時報錯。
        "noImplicitAny": true,
        // 刪除註釋
        "removeComments": true,
        // 保留 const和 enum聲明
        "preserveConstEnums": false,
        // 生成sourceMap 
        "sourceMap": true,
        // 目標文件所在路徑
        "outDir": "./lib",
        // 編譯過程當中須要引入的庫文件的列表
        "lib": [
            "dom",
            "es7"
        ],
        // 額外支持解構/forof等功能
        "downlevelIteration": true,
        // 是否生成聲明文件
        "declaration": true,
        // 聲明文件路徑
        "declarationDir": "./lib",
        // 此處設置爲node,才能解析import xx from 'xx'
        "moduleResolution": "node"
    },
    // 入口文件
    "include": [
        "src/main.ts"
    ]
}
複製代碼

源碼

運行命令

好了文件配置好了, 咱們能夠把咱們的ts代碼轉成js, 就差在package.json中加一條命令了:

// package.json
{
    ...
    "script": {
        "build": "tsc && rollup -c"
    }
    ...
}
複製代碼

這裏tsc是爲了在lib目錄生產聲明文件, rollup -c會生成umd/es/commonjs三種模塊的代碼, "c"是config縮寫, 表明讀取rollup.config.js

源碼

彩蛋

其實npx並非本文主角,可是若是你的tsc不是全局安裝的, 那麼你在命令行運行tsc會提示找不到他, 可是若是你用npx tsc那麼他就會運行你本地的node_modules中的tsc命令, 驚不驚喜.

補充說明

若是你瞭解webpack和rollup的不一樣下面內容能夠跳過.

爲何不用webpack

一說到打包工具你們想到的確定是webpack, 他有各類loader, 固然也有ts-loader, 可是他生成代碼有不少是非咱們所寫的邏輯代碼, 好比一些他自有的模塊加載功能:

rollup更適合開發插件?

是的, rollup生成代碼只是把咱們的代碼轉碼成目標js並沒有其餘, 同使若是須要,他能夠同時幫咱們生成支持umd/commonjs/es的js代碼, vue / react /angular都在用他做爲打包工具.

vue

react

angular

爲何還沒到寫代碼?

2期了都尚未講到代碼, 估計你們都着急, 莫着急,下一期開始我們就講代碼了, 平時上班工做實在是忙, 都是晚上更新文章, 這個週末我會多寫點, 若是實在火燒眉毛也能夠先看看我寫好的代碼預熱下:

github.com/any86/any-t…