glup + ts 搭建工程

時間 2019-11-09

標籤 glup 搭建工程简体版

原文原文鏈接

安裝

假設您已經安裝了 Node.js，建立目錄以保存應用程序，並將其設置爲工做目錄。html

建立簡單工程咱們首先建立一個新目錄。命名爲tsDemo，也能夠使用任何你喜歡的名字。node

安裝依賴

npm init //初始化 項目
    npm install --save-dev typescript gulp gulp-typescript //安裝必要依賴
複製代碼

而後，考慮擁有以下的目錄結構...

ts.json
    gulpfile.js
    src/
        greet.ts
        main.ts
        index.html
複製代碼

寫一個簡單的例子讓咱們寫一個Hello World程序。在src目錄下修改main.ts文件：typescript

import { sayHello } from "./greet";
console.log(sayHello("TypeScript"));
{% endcodeblock %}
修改src/greet.ts文件以下：
{% codeblock %}
export function sayHello(name: string) {
    return `Hello from ${name}`;
}
複製代碼

修改gulpfile.js文件以下：npm

var gulp = require("gulp");
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");

gulp.task("default", function () {
    return tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest("dist"));
});
複製代碼

最後，將 src/greet.ts 添加到 tsconfig.json 以下：json

{
    "files": [
        "src/main.ts",
        "src/greet.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es5"
    }
}
複製代碼

在Node.js下進行測試：gulp

gulp
node dist/main.js
複製代碼

如今應該能夠打印出「Hello from TypeScript」。瀏覽器

如今，讓咱們把這個工程由Node.js環境移到瀏覽器環境裏，修改目錄下package.json。babel

{
  "name": "ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^7.0.0",
    "browserify": "^16.2.3",
    "gulp": "^3.9.1",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-typescript": "^5.0.1",
    "gulp-uglify": "^3.0.2",
    "gulp-util": "^3.0.8",
    "tsify": "^4.0.1",
    "typescript": "^3.4.5",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0",
    "watchify": "^3.11.1"
  },
  "dependencies": {}
}
複製代碼

npm i   // 安裝依賴
複製代碼

新建一個頁面在src目錄下新建一個index.html文件：學習

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8" /> <title>Hello World!</title> </head> <body> <p id="greeting">Loading ...</p> <script src="bundle.js"></script> </body> </html> 複製代碼

修改main.ts文件：測試

import { sayHello } from "./greet";
// console.log(sayHello("TypeScript"));
function showHello(divName: string, name: string) {
    const elt = document.getElementById(divName);
    elt.innerText = sayHello(name);
}

showHello("greeting", "TypeScript");
複製代碼

修改gulpfile.js文件以下：

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var tsify = require('tsify');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');
var watchify = require("watchify");
var gutil = require("gulp-util");
var uglify = require('gulp-uglify');
var paths = {
    pages: ['src/*.html']
};

var watchedBrowserify = watchify(browserify({
    basedir: '.',
    debug: true,
    entries: ['src/main.ts'],
    cache: {},
    packageCache: {}
}).plugin(tsify));
function bundle() {
    return watchedBrowserify
      .transform('babelify', {
          presets: ['es2015'],
          extensions: ['.ts']
      })
      .bundle()
      .pipe(source('bundle.js'))
      .pipe(buffer())
      .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(uglify())
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('dist'));
}
gulp.task('copyHtml', function () {
    return gulp.src(paths.pages)
        .pipe(gulp.dest('dist'));
});
gulp.task("default", ["copyHtml"], bundle);
watchedBrowserify.on("update", bundle);
watchedBrowserify.on("log", gutil.log);
複製代碼

這裏運用了CommonJs export定義模塊，ES2015引入模塊語法。Browserify把全部模塊捆綁成一個JavaScript文件。Babel編譯ES2015。使用 vinyl-source-stream 把輸出文件命名爲bundle.js。Uglify壓縮代碼。Watchify監聽編譯。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。