# typescripe-lib-starter

**Repository Path**: appleskiller/typescripe-lib-starter

## Basic Information

- **Project Name**: typescripe-lib-starter
- **Description**: 基于Typescript的库项目模板。基于Typescript的库项目模板。基于Rollup、Karma+Jasmin及Webpack。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: webframework

**Tags**: None

## README

# typescripe-lib-starter

#### 项目介绍

基于Typescript的库项目模板。基于Rollup、Karma+Jasmin及Webpack。

## Quick Start

#### Install Dependencies

```shell
$ npm i
```

#### Build

```shell
$ npm run build
```

- 使用`Rollup`构建`Typescript`源代码，生成UMD、ESM5标准bundle
- 作为默认，构建脚本同时会生成一个包含了所有第三方代码的、UMD标准的单文件`bundle`, 如果您并不需要这个`bundle`，您可以手动在`script/build.js`注释掉相应的代码块。

#### Unit Test

```shell
$ npm run test
```

- 使用`Karma + Webpack`构建`Typescript`单元测试代码
- 您可以直接使用`Typescript`编写您的测试用例，并按您的意愿组织测试用例目录结构。
- 只有以`*.spec.ts`的测试代码会被执行

#### Serve And Trouble-shooting

```shell
$ npm start
```

- 使用`Webpack`以一个常规的`Web`项目形式构建并运行`demo`，您可以在这之上进行快速开发及调试
- 尽管最终您编写的库并非按与`demo`相同的形式被人使用，但对于一些最终应用于`Web App`中的库项目，`demo`对于快速开发将很有帮助
- 如有需要，您可以使用`npm build-demo`命令构建`demo`的内容

## Directory structure

```shell
|- src/
|- test/
|- demo
|    |- src/
|    |- assets
|    |- app.bundle.js
|    |- index.html
|- script/
|    |- build.js
|    |- release.js
|- tsconfig.json
|- karma.conf.js
|- webpack.config.js
|- package.json
```

- `src`: 源代码目录
- `test`: 单元测试目录
- `demo`: Demo页面目录
    - `src`: Demo页面源码
    - `app.bundle.js`: 执行`npm run build-demo`后由`Webpack`生成的生产版本的`bundle`。注意，使用`npm start`时`Webpack`并不生成此bundle
- `script`: 工具脚本目录
    - `build.js`: 构建脚本，在此文件中调用了`Rollup`完成构建任务。您可以选择性的使用其中的构建代码块，这取决于您正在编写的库是何种用途
    - `release.js`: 发布脚本，此脚本能够帮您自动`publish`到`npm`
- `tsconfig.json`: typescript配置文件
- `karma.conf.js`: `karma`配置文件。用于单元测试
- `webpack.config.js`: `Webpack`配置文件。用于运行或构建`demo`项目