場景
當我們單純用ts開發一個公有庫時,沒有了腳手架的幫助,我們需要藉助webpack完成該ts項目的打包。
核心要點:
- 將ts編譯成js
- 對打包進行自定義配置
依賴包
- webapck(打包工具,必須)
- ts-loader(將ts編譯成js的loader,必須)
- ts-lint(檢測ts代碼是否規範,非必須)
- clean-webpack-plugin(每次打包時,刪除上次打包的殘留文件,保證打出的包整潔,非必須)
tsconfig.json配置
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/",// 打包到的目錄
"sourceMap": true,// 是否生成sourceMap(用於瀏覽器調試)
"noImplicitAny": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"declaration": true,// 是否生成聲明文件
"declarationDir": "./dist/types/",// 聲明文件打包的位置
"declarationMap": true,// 是否生成聲明文件map文件(便於調試)
"moduleResolution": "node",
"module": "esnext",
"target": "es5",// 轉化成的目標語言
"baseUrl": "./",
"types": [
"node",
"jest"
],
"typeRoots": [
"./node_modules/@types"
],
"lib": [
"dom",
"es2015"
],
"jsx": "react",
"allowJs": false
},
"include": [
"src/**/*.ts"
],// 要打包的文件
"exclude": [
"node_modules",
"*.test.ts"
]
}
webpack.config.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
// the path(s) that should be cleaned
let pathsToClean = ['dist'];
// the clean options to use
let cleanOptions = {
root: path.resolve(__dirname),
// exclude: ['shared.js'],
verbose: true,
dry: false,
};
module.exports = {
resolve: {
extensions: ['.js', '.ts', '.json'],
},
devtool: 'source-map',// 打包出的js文件是否生成map文件(方便瀏覽器調試)
mode: 'production',
entry: {
‘my-ts': './src/index.ts',
},
output: {
filename: '[name].js',// 生成的fiename需要與package.json中的main一致
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'commonjs',
},
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'tslint-loader',
options: {
configFile: path.resolve(__dirname, './tslint.json'),
},
},
],
exclude: /node_modules/,
},
{
test: /\.tsx?$/,
use: [
{
loader: 'ts-loader',
options: {
// 指定特定的ts編譯配置,爲了區分腳本的ts配置
configFile: path.resolve(__dirname, './tsconfig.json'),
},
},
],
exclude: /node_modules/,
},
],
},
plugins: [new CleanWebpackPlugin(pathsToClean, cleanOptions)],
};
package.json
{
"name": "my-ts-project",
"version": "1.0.0",
"description": "",
"main": "./dist/my-ts.js",// 需要與webpack打包出來的內容一致
"types": "./dist/types/index.d.ts",// 需要與types文件的路徑一致
"private": false,
"publisher": "[email protected]",
"scripts": {
"build": "tsc",
"test": "jest"
},
"files": [
"dist"
],// 最終發佈到npm上時提交的內容
"repository": {
"type": "",
"url": ""
},
"keywords": [
"my-ts"
],
"author": "[email protected]",
"license": "MIT",
"devDependencies": {
"@types/jest": "^23.3.1",
"@types/node": "^10.5.5",
"clean-webpack-plugin": "^1.0.1",
"jest": "^23.4.2",
"prettier": "^1.16.4",// 優化代碼格式
"ts-jest": "^23.0.1",
"ts-lint": "^4.5.1",
"ts-loader": "^5.3.3",
"tslint": "^5.11.0",
"tslint-loader": "^3.5.4",
"typescript": "^3.0.1",
"webpack": "^4.28.1"
}
}