由于近期需要开发一个比较复杂的组件，所以决定采用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/
好了，这样一个完整的项目就构建完成了。有点复杂哈~
网友评论