欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2019年12月18日 15:46:11   作者：JS老狗  
這篇文章主要介紹了使用webpack/gulp構(gòu)建TypeScript項(xiàng)目的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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

初始化 tsconfig.json

tsc --init

之后，我們會(huì)在項(xiàng)目目錄中得到一個(gè)完整冗長的 tsconfig.json 配置文件。這個(gè)文件暫且不必改動(dòng)。

{
 "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']
  }
}

運(yùn)行webpack

經(jīng)過上述配置之后，在控制臺(tái)項(xiàng)目路徑內(nèi)，中直接運(yùn)行 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 中，生成了一個(gè)轉(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'))
})

運(yùn)行g(shù)ulp

經(jīng)過上述配置之后，在控制臺(tái)項(xiàng)目路徑內(nèi)，中直接運(yùn)行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 中，生成了一個(gè)轉(zhuǎn)換且合并完成的gulp-bundle.js 文件。

配置npm 指令

我們將這兩個(gè)指令整合到項(xiàng)目指令中：

"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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論