any-touch 一個手勢庫
往期目錄
用 TypeScript 開發手勢庫 - (1)web開發常用手勢有哪些?
用 TypeScript 開發手勢庫 - (3)統一化Mouse和Touch事件
標題有點長
今天的標題有點長, 但不難, 講的都是工具配置和使用, 就3個知識點:
- 如何配置tsconfig.json
- 如何配置rollup.config.js
- 使用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/383514580/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
為什麼還沒到寫程式碼?
2期了都還沒有講到程式碼, 估計大家都著急, 莫著急,下一期開始我們們就講程式碼了, 平時上班工作實在是忙, 都是晚上更新文章, 這個週末我會多寫點, 如果實在迫不及待也可以先看看我寫好的程式碼預熱下: