如何在单个js文件中构建具有所有依赖项的TypeScript项目?

时间:2019-01-16 17:41:33

标签: javascript typescript webpack build gulp

我正在努力构建TypeScript项目,该项目是此JavaScript库的一个包装: https://github.com/IdentityModel/oidc-client-js 放入一(1)个JavaScript文件中,该文件包含其所有的node_modules依赖关系,该依赖关系将与旧的浏览器(主要是IE 11(也包括10)兼容)。

最好是两个版本:

  • 一个带有源地图的地图,未缩小
  • 另一个没有源图的地图,已缩小

我的index.ts:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <h2>Each text with it's own state and clear should clear the respective text fields</h2>
  <ul v-for="(todo,i) in todos">
    <li>
      <input type="text" :placeholder="`${todo.text}`" v-model="todo.value">
    </li>
    <li>
      <input type="text" :placeholder="`${todo.text1}`"  v-model="todo.value1">
    </li>
    <button @click="clear(i)">Clear</button>
  </ul>
</div>

我的authentication.service.ts:

import { AuthenticationService } from './src/authentication.service';

export default {
    AuthenticationService,
};

我的package.json:

import { UserManager, UserManagerSettings, User, WebStorageStateStore, OidcClientSettings } from 'oidc-client';
import { map } from 'rxjs/operators';
import { Observable, from } from 'rxjs';

export class AuthenticationService {

    private manager: UserManager;

    constructor() { };

    ....

}

我的tsconfig.json:

{
  "name": "mainapp",
  "version": "0.0.1",
  "description": "TypeScript wrap",
  "main": "index.ts",
  "license": "MIT",
  "dependencies": {
    "oidc-client": "^1.6.1",
    "rxjs": "^6.3.3"
  },
  "devDependencies": {
    "@types/node": "^10.12.18",
    "babel-polyfill": "^6.26.0",
    "gulp": "^4.0.0",
    "gulp-concat": "^2.6.1",
    "oidc-client": "^1.6.1",
    "typescript": "^3.2.2",
    "webpack": "^4.28.4",
    "webpack-stream": "^5.2.1"
  }
}

我应该使用gulp或/和webpack吗?我该如何实现?

0 个答案:

没有答案