溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2020-09-21 14:28:56 來源：腳本之家 閱讀：180 作者：JS老狗 欄目：web開發(fā)

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

  1. 將ts 項目整體轉(zhuǎn)換為js項目
  2. 按常規(guī)套路，對該 js 項目進(jìn)行打包構(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è)置為默認(rèn)使用webpack 構(gòu)建。

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手