由於近期需要開發一個比較複雜的組件，所以決定採用typescript進行開發。之前有用過typescript進行開發，用tsc打包後，再用腳本將所有js進行合併，然後再用uglyjs壓縮js，但是最終報錯了，原因就是合併js的順序問題，後來用腳本指定合併js的順序。
本次採用typescript+webpack進行開發，此篇文章記錄一下項目的構建流程。
初始化項目
1. 創建項目
以項目名demo爲例：
mkdir demo
cd demo
npm init -y
2. 安裝依賴
demo/目錄下：
npm install typescript -save-dev
npm install ts-loader -save-dev
npm install path -save-dev
npm install webpack -save-dev
npm install webpack-cli -save-dev
npm install @types/lodash -save-dev
npm install @types/node -save
npm install lodash -save
3. 目錄結構
-- demo/ 根目錄
| -- build/ 打包後的js庫
| -- dist/ 打包後的例子
| -- docs/ 文檔
| -- node_modules/ js依賴
| -- out/ ts打包後的代碼
| -- src/ 源碼目錄
| -- .gitignore git上傳需要忽略的文件和目錄
| -- .npmignore npm上傳需要忽略的文件和目錄
| -- index.html 頁面
| -- LICENCE 協議
| -- package.json npm配置
| -- tsconfig.json ts配置
| -- webpack.config.js webpack配置
| -- webpack.custom.config.js webpack配置
| -- webpack.development.production.js webpack配置
配置
1. ts相關配置
tsconfig.json:
{
"compilerOptions": {
"target": "es5" ,
"module": "commonjs" ,
"lib": [
"es6",
"dom",
"es2015.promise"
] ,
"allowJs": false ,
"checkJs": false ,
"declaration": true ,
"sourceMap": true ,
"outDir": "./out/" ,
"removeComments": true ,
"strict": true ,
"noImplicitAny": false ,
"baseUrl": "./" ,
"esModuleInterop": true
},
"exclude": ["build", "dist", "out", "*.config.js"]
}
2. webpack相關配置
webpack.config.js:
const path = require("path");
var config = {
entry: "./src/index.ts",
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist")
}
};
module.exports = (env, argv) => {
if (argv.mode === "development") {
config.devtool = "inline-source-map";
} else if (argv.mode === "none") {
config.output.path = path.resolve(__dirname, "build");
config.output.libraryTarget = "umd";
config.output.globalObject = "typeof self !== 'undefined' ? self : this";
}
return config;
};
webpack.custom.config.js:
module.exports = {
mode: "none"
};
webpack.development.production.js:
module.exports = {
mode: "development"
};
不同模式下，可以指定不同的入口，已經不同的策略
3. npm相關配置
package.json:
{
"name": "demo",
"version": "0.0.1",
"description": "demo , typescript + webpack build project",
"main": "build/main.js",
"module": "out/main.js",
"files": [
"build",
"dist",
"src",
"out",
"LICENSE.md",
"README.md"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=development",
"buildX": "tsc && webpack --mode=none"
},
"repository": {
"type": "git",
"url": "git+https://github.com/xxxx/demo.git"
},
"bugs": {
"url": "https://github.com/xxxx/demo/issues"
},
"homepage": "https://github.com/xxxx/demo#readme",
"keywords": [
"demo",
"typescript",
"webpack"
],
"author": "xxx <http://www/xxx.xxx>",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}
使用npm run build進行打包、測試
使用npm run buildX進行打包，然後用npm publish發佈js到npmjs
其他
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>demo</title>
<style>
</style>
</head>
<body>
<div>
</div>
<script src="main.js"></script>
<script>
</script>
</body>
</html>
將index.html複製到dist目錄下，採用VScode插件：Live Server可查看具體效果
添加src/index.js：
import _ from "lodash";
function component() {
const element = document.createElement("div");
element.innerHTML = _.join(["webpack"], " ");
return element;
}
document.body.appendChild(component());
.gitignore:
dist/
out/
node_modules/
.DS_Store
.npmignore
node_modules/
.DS_Store
dist/
*.html
docs/
*.config.js
src/
dist/
好了，這樣一個完整的項目就構建完成了。有點複雜哈~