使用webpack/gulp構(gòu)建TypeScript項目的方法示例

來源：本站原創(chuàng)|時間：2020-01-10|欄目：JavaScript|點擊：次

總體來看，TypeScript項目構(gòu)建主要分兩步：

將ts 項目整體轉(zhuǎn)換為js項目
按常規(guī)套路，對該 js 項目進行打包構(gòu)建

構(gòu)建過程中，對 ts 文件的轉(zhuǎn)換不再使用命令行方式，所以 tsc 的配置參數(shù)，需要通過 tsconfig.json 文件設(shè)置。

初始化 tsconfig.json

tsc --init

之后，我們會在項目目錄中得到一個完整冗長的 tsconfig.json 配置文件。這個文件暫且不必改動。

{
 "compilerOptions": {
  /* Basic Options */
  // "incremental": true,          /* Enable incremental compilation */
  "target": "es5",             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
  "module": "commonjs",           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
  // "lib": [],               /* Specify library files to be included in the compilation. */
  // "allowJs": true,            /* Allow javascript files to be compiled. */
  // "checkJs": true, ...
 }
}

使用webpack 構(gòu)建

全局安裝 webpack

npm i -g webpack webpack-cli

本地安裝 ts-loader 和 typescript

npm i -D ts-loader typescript

創(chuàng)建 webpack.config.js

const path = require('path')
module.exports = {
  mode: 'production',
  entry: {
    main: './index.ts'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  output: {
    filename: 'webpack-bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs',
  },
  resolve: {
    extensions: ['.ts']
  }
}

運行webpack

經(jīng)過上述配置之后，在控制臺項目路徑內(nèi)，中直接運行 webpack 。

% webpack  
Hash: 1c028195d238a71fe1c7
Version: webpack 4.41.3
Time: 726ms
Built at: 2019/12/17 下午2:56:12
  Asset   Size Chunks       Chunk Names
index.js 1.61 KiB    0 [emitted] main
Entrypoint main = index.js
[0] ./a.ts 147 bytes {0} [built]
[1] ./b.ts 147 bytes {0} [built]
[2] ./index.ts 318 bytes {0} [built]
[3] ./c.ts 378 bytes {0} [built]

在dist 中，生成了一個轉(zhuǎn)換且合并完成的webpack-bundle.js 文件。

使用 gule 構(gòu)建

全局安裝 gule

npm i -g gulp

本地安裝

gulp
browserify
tsify
vinyl-source-stream

npm i -D gulp browserify tsify vinyl-source-stream

創(chuàng)建 gulpfile.js 文件

const gulp = require('gulp')
const tsify = require('tsify')
const browserify = require('browserify')
const source = require('vinyl-source-stream')

gulp.task('default', () => {
  return browserify({
    basedir: '.',
    debug: true,
    entries: ['index.ts'],
    cache: {},
    packageCache: {}
  }).plugin(tsify).bundle()
  .pipe(source('gulp-bundle.js'))
  .pipe(gulp.dest('dist'))
})

運行g(shù)ulp

經(jīng)過上述配置之后，在控制臺項目路徑內(nèi)，中直接運行g(shù)ulp 。

% gulp
[15:37:30] Using gulpfile ~/ts-learn/bundle/gulpfile.js
[15:37:30] Starting 'default'...
[15:37:32] Finished 'default' after 1.4 s

在dist 中，生成了一個轉(zhuǎn)換且合并完成的gulp-bundle.js 文件。

配置npm 指令

我們將這兩個指令整合到項目指令中：

"scripts": {
  "test": "ts-node test",
  "build-webpack": "webpack",
  "build-gulp": "gulp",
  "build": "npm run build-webpack"
}

這里分別針對webpack /gulp 添加了構(gòu)建指令，并將build 指令設(shè)置為默認使用webpack 構(gòu)建。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：Echarts實現(xiàn)單條折線可拖拽效果

欄目：JavaScript

下一篇：Java

本文標題：使用webpack/gulp構(gòu)建TypeScript項目的方法示例

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9477.html

更多JavaScript

雷火电竞-中国电竞赛事及体育赛事平台

JavaScript

使用webpack/gulp構(gòu)建TypeScript項目的方法示例

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機閱讀