国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用TypeScript開發(fā)手勢庫 - (2)tsconfig.json & rollup.c

cod7ce / 3192人閱讀

摘要:一個(gè)手勢庫往期目錄用開發(fā)手勢庫開發(fā)常用手勢有哪些用開發(fā)手勢庫統(tǒng)一化和事件不到行用實(shí)現(xiàn)一個(gè)標(biāo)題有點(diǎn)長今天的標(biāo)題有點(diǎn)長但不難講的都是工具配置和使用就個(gè)知識(shí)點(diǎn)如何配置如何配置使用運(yùn)行項(xiàng)目所在的命令注為了閱讀體驗(yàn)我把為什么不用放在的本文的最

any-touch 一個(gè)手勢庫

往期目錄

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

用TypeScript開發(fā)手勢庫 - (3)統(tǒng)一化Mouse和Touch事件

不到30行, 用any-touch實(shí)現(xiàn)一個(gè)drawer

標(biāo)題有點(diǎn)長

今天的標(biāo)題有點(diǎn)長, 但不難, 講的都是工具配置和使用, 就3個(gè)知識(shí)點(diǎn):

如何配置tsconfig.json

如何配置rollup.config.js

使用npx運(yùn)行項(xiàng)目所在node_modules的命令

rollup.config.js

: 為了閱讀體驗(yàn), 我把為什么不用webpack放在的本文的最后. 我對(duì)代碼做了注釋(如有不懂請(qǐng)留言):

// 為了讓rollup識(shí)別commonjs類型的包,默認(rèn)只支持導(dǎo)入ES6
import commonjs from "rollup-plugin-commonjs";
// 為了支持import xx from "xxx"
import nodeResolve from "rollup-plugin-node-resolve";
// ts轉(zhuǎn)js的編譯器
import typescript from "rollup-plugin-typescript";
// 支持加載json文件
import json from "rollup-plugin-json";
// 支持字符串替換, 比如動(dòng)態(tài)讀取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/383514580/any-touch
 * Released under the MIT License.
 */`

export default {
    input: "./src/main.ts",
    plugins: [
        // 代碼中的__VERSION__字符串會(huì)被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識(shí)別的入口文件, 如果沒有該字段, 那么會(huì)去讀取main字段
            file: pkg.module,
            banner,
            sourcemap: true
        },
        {
            format: "umd",
            name: "AnyTouch",
            file: pkg.browser,
            banner,
            sourcemap: true
        }
    ]
};

源碼

tsconfig.js
{
    "compilerOptions": {
        // 允許未執(zhí)行的代碼不報(bào)錯(cuò)
        "allowUnreachableCode": true,
        // 嚴(yán)格模式, 強(qiáng)烈建議開啟
        "strict": true,
        // 支持別名導(dǎo)入:
        // import * as React from "react"
        "esModuleInterop": true,
        // 目標(biāo)js的版本
        "target": "es5",
        // 目標(biāo)代碼的模塊結(jié)構(gòu)版本
        "module": "es6",
        // 在表達(dá)式和聲明上有隱含的 any類型時(shí)報(bào)錯(cuò)。
        "noImplicitAny": true,
        // 刪除注釋
        "removeComments": true,
        // 保留 const和 enum聲明
        "preserveConstEnums": false,
        // 生成sourceMap    
        "sourceMap": true,
        // 目標(biāo)文件所在路徑
        "outDir": "./lib",
        // 編譯過程中需要引入的庫文件的列表
        "lib": [
            "dom",
            "es7"
        ],
        // 額外支持解構(gòu)/forof等功能
        "downlevelIteration": true,
        // 是否生成聲明文件
        "declaration": true,
        // 聲明文件路徑
        "declarationDir": "./lib",
        // 此處設(shè)置為node,才能解析import xx from "xx"
        "moduleResolution": "node"
    },
    // 入口文件
    "include": [
        "src/main.ts"
    ]
}

源碼

運(yùn)行命令

好了文件配置好了, 我們可以把我們的ts代碼轉(zhuǎn)成js, 就差在package.json中加一條命令了:

// package.json
{
    ...
    "script": {
        "build": "tsc && rollup -c"
    }
    ...
}

這里tsc是為了在lib目錄生產(chǎn)聲明文件, rollup -c會(huì)生成umd/es/commonjs三種模塊的代碼, "c"是config縮寫, 代表讀取rollup.config.js

源碼

彩蛋

其實(shí)npx并不是本文主角,但是如果你的tsc不是全局安裝的, 那么你在命令行運(yùn)行tsc會(huì)提示找不到他, 但是如果你用npx tsc那么他就會(huì)運(yùn)行你本地的node_modules中的tsc命令, 驚不驚喜.

補(bǔ)充說明

如果你了解webpack和rollup的不同下面內(nèi)容可以跳過.

為什么不用webpack

一說到打包工具大家想到的肯定是webpack, 他有各種loader, 當(dāng)然也有ts-loader, 但是他生成代碼有很多是非我們所寫的邏輯代碼, 比如一些他自有的模塊加載功能:

rollup更適合開發(fā)插件?

是的, rollup生成代碼只是把我們的代碼轉(zhuǎn)碼成目標(biāo)js并無其他, 同使如果需要,他可以同時(shí)幫我們生成支持umd/commonjs/es的js代碼, vue / react /angular都在用他作為打包工具.

vue

react

angular

為什么還沒到寫代碼?

2期了都還沒有講到代碼, 估計(jì)大家都著急, 莫著急,下一期開始咱們就講代碼了, 平時(shí)上班工作實(shí)在是忙, 都是晚上更新文章, 這個(gè)周末我會(huì)多寫點(diǎn), 如果實(shí)在迫不及待也可以先看看我寫好的代碼預(yù)熱下:

https://github.com/383514580/any-touch

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/54736.html

相關(guān)文章

  • TypeScript開發(fā)手勢 - (2)tsconfig.json & rollup.c

    摘要:一個(gè)手勢庫往期目錄用開發(fā)手勢庫開發(fā)常用手勢有哪些用開發(fā)手勢庫統(tǒng)一化和事件不到行用實(shí)現(xiàn)一個(gè)標(biāo)題有點(diǎn)長今天的標(biāo)題有點(diǎn)長但不難講的都是工具配置和使用就個(gè)知識(shí)點(diǎn)如何配置如何配置使用運(yùn)行項(xiàng)目所在的命令注為了閱讀體驗(yàn)我把為什么不用放在的本文的最 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); an...

    roundstones 評(píng)論0 收藏0
  • typescript開發(fā)手勢 - (1)web開發(fā)手勢有哪些?

    這只是個(gè)開頭 說在最前面,本文是一個(gè)系列文章的開頭, 這個(gè)系列里我會(huì)講如何用typescript開發(fā)一款支持pc和手機(jī)端的手勢庫any-touch, 以及通過jest讓你的代碼測試覆蓋率100%. showImg(https://segmentfault.com/img/bVbp3B0?w=936&h=246); 目錄 用TypeScript開發(fā)手勢庫 - (2)tsconfig.json & r...

    raise_yang 評(píng)論0 收藏0
  • 不到30行, any-touch實(shí)現(xiàn)一個(gè)drawer

    摘要:一個(gè)手勢庫預(yù)覽的基本邏輯添加個(gè)一個(gè)是當(dāng)隱藏的時(shí)候打開隱藏的觸發(fā)開關(guān)一個(gè)是本身對(duì)把手和進(jìn)行進(jìn)行定位到界面的右側(cè)邊緣調(diào)整和把手的樣式這里把手主要是要設(shè)置背景色為透明具體樣式看下面代碼用分別給把手和添加拖拽手勢當(dāng)隱藏時(shí)拖拽把手向右通過返回的每 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); ...

    source 評(píng)論0 收藏0
  • 介紹vue項(xiàng)目中jsconfig.json概念及使步驟

      先為大家介紹在vue項(xiàng)目中 jsconfig.json  官方說明:當(dāng)您在工作空間中有一個(gè)定義項(xiàng)目上下文的jsconfig.json文件時(shí),JavaScript體驗(yàn)會(huì)得到改進(jìn)。  概述  目錄中存在tsconfig.json文件表明該目錄是 TypeScript 項(xiàng)目的根目錄。該tsconfig.json文件指定編譯項(xiàng)目所需的根文件和編譯器選項(xiàng)。  JavaScript 項(xiàng)目可以使用jscon...

    3403771864 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

cod7ce

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<