What 这是一个怎样的工具包

这是一个可用于快速构建类库开发的纯TS项目, 基于rollup, typeScript, @types/webpack, @types/jest

Why 为什么开发这个工具包

• 减少的项目构建成本
• 避免构建过程中重复的爬坑

How 这个工具包是如何运行和配置的

运行流程

• rollup打包源码至/lib/
• /test/下的文件引用/lib/下的文件

TS的配置, /tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "target": "es3",
    "outDir": "bin-debug",
    "experimentalDecorators": true,
    "lib": [
      "es5",
      "dom",
      "es2015.promise",
      "esnext"
    ],
    "types": ["node", "jest"],
    "declaration": true,
    "declarationDir": "lib/types"
  },
  "include": [
    "src",
    "test"
  ]
}

rollup的基本配置, /rollup.config.ts

$ npm i -D rollup rollup-plugin-typescript2 rollup-plugin-sourcemaps rollup-plugin-json

import typescript from 'rollup-plugin-typescript2'
import sourceMaps from 'rollup-plugin-sourcemaps'
import JsonPlugin from 'rollup-plugin-json'
const json = require('./package.json')

export default {
  input: './src/main.ts',
  output: [
    {
      file: json.main,
      format: 'umd',
      name: 'SingletonClass',
      sourcemap: true,
      minify: true
    },
    {
      file: json.module,
      format: 'es',
      sourcemap: true,
      minify: true
    },
  ],
  plugins: [
    JsonPlugin(),
    typescript({
      useTsconfigDeclarationDir: true,
      clean: true,
      abortOnError: true
  }),
    sourceMaps(),
  ],
}

开发服务器的配置, ts-webpack-dev-server

const webpack = require('webpack')
import * as WebpackDevServer from 'webpack-dev-server'
import { Entry, Output, Plugin, Configuration, Options } from 'webpack'
const resolve: Function = require('./webpack.config.util').resolve

const entry: Entry = {
  app: resolve('test/main.ts'),
}

const output: Output = {
  filename: '[name].js',
  path: resolve('output'),
  publicPath: '/'
}

const devtool: Options.Devtool = 'cheap-module-eval-source-map'

const plugins: Plugin[] = [
  new webpack.HotModuleReplacementPlugin()
]

const devServer: WebpackDevServer.Configuration = {
  host: '0.0.0.0',
  port: 8000,
  overlay: {
    errors: true
  },
  hot: true,
  open: false,
  useLocalIp: true
}

const devConfig: Configuration = {
  entry,
  output,
  devtool,
  plugins,
  devServer,
}

module.exports = devConfig

测试配置, /jest.config.ts

module.exports = {
  "transform": {
    "^.+\\.jsx?$": "babel-jest",
    "^.+\\.tsx?$": "ts-jest"
  },
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js"
  ],
  "testRegex": "/*.spec.(ts|tsx|js)$",
  preset: "ts-jest",
}

ToDo 待做

• precommit-check
• banner
• ts-lint
• types define docs optimization