TypeScript+webpack开发js库

由于近期需要开发一个比较复杂的组件，所以决定采用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 ",
  "license": "MIT",
 "devDependencies": {},
 "dependencies": {}
}

使用npm run build进行打包、测试
使用npm run buildX进行打包，然后用npm publish发布js到npmjs

其他

index.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/

好了，这样一个完整的项目就构建完成了。有点复杂哈~