手動使用gulp4.0配合rollup搭建typescript 寫一個自己的一個開源庫(起步 構建自動化處理，熱更新瀏覽器)

為什么要使用gulp+rollup模式

我嘗試過gulp+webpack，gulp+browerify~最后決定用gulp+rollup，gulp既然已經4.0都出了很久了我還停留在2的版本，所以此次就使用4開始吧

基於面向對象開發

編輯器它是簡單可定制的，可用於大多數移動端（表示兼容讓我很蛋疼）和pc端、我希望它的插件是可插拔的，對於任何一個開發者而言都是比較容易去開發一個新的插件的，對於自己的項目。我會將文檔寫的細而豐富。

do what

我想自己寫一個開源的富文本編輯器，這算是一個開始，它使用Typescript來編寫，因為我希望在以后會有很多的人去使用它，同時，也是對自己學習這么多年js的一個總結，用過ckeditor，simeditor，wangeditor，ueditor，tinyeditor，等等很多優質的富文本編輯器，發現都不太好用，wangeditor我會吸取他的經驗

why do

因為自己打算寫一個開源庫出來的，不想使用webpack去做一個bundle或者browerify去bundle(為什么要bundle我在后邊會說)，而且要使用我們偉大的typescript 來編寫一個自己開源的富文本編輯器，這是一個配置文件吧，當然他不完善，但是可以作為一個普通的開發了。后續會補充完善的
首先我們寫的代碼會被babel轉換成commonJS規范的格式，這種格式在瀏覽器是不能夠執行的，如果你的代碼中用到了import或者export或者require 這些都是不行的，我們要使用typescript來寫項目的話呢，比較好的是我們可以在tsconfig中配置這個東西
javascript "target": "es5"
對，加上這個就好了，就可以轉換成你想要的代碼了，但是這樣瀏覽器還是不能夠執行，因為沒有被bundle，所以我們需要一個插件來幫我們完成打包后的代碼轉換成瀏覽器可以執行的代碼，也就是rollup-plugin-typescript這個插件就可以了。然后在部署一下瀏覽器熱更新，最開始我考慮的是使用gulp+webpack來實現多入口配置打包，但是打包后的代碼包含webpack的頭聲明文件，你們使用過vue的全家桶就知道，打包后的代碼包含webpack對於export、require等的處理，而且有個很明顯的名字，webpack開頭的。我是很拒絕的，我希望代碼是干凈的，所以~

// const buildConfig = require('./webpack.config')

const gulp = require('gulp')
const path = require('path')
const webpack = require('webpack')
const webpackStream = require('webpack-stream')
const pump = require('pump')
const del = require('del')
const less = require('gulp-less')
const buildConfig = require('./webpack.config')
const rollup = require('rollup')
const rollupTypescript = require('rollup-plugin-typescript')
const browserSync = require("browser-sync").create(),reload=browserSync.reload;
const ugify = require('gulp-uglify')

// 后續會對這個做環境區分
const devEnv = ['development','production'];

const cleanDistDir = mode => () => {
  return devEnv.includes(mode) ? del(['./dist']): undefined
}
// 棄用
const buildJs  = mode => done => {
  const config = buildConfig.buildSingleWebpackConfig('./src/js/test/index.ts','test.js')
   pump([
      gulp.src('./src/js/**/*.ts'),
      //基於生成環境需要配置黑盒streamMode webpackStream(streamMode,webpack)， 之前有寫過webpack的模式~
      webpackStream(config, webpack),
      gulp.dest('./dist/js')
    ], done) 
}

// 構建css
const buildCss   = done => {
  pump([
    gulp.src('./src/skin/light/main.less'),
    less(),
    gulp.dest('./dist/css/'),
    reload({stream:true})
  ],done)
}
/**
 *  多插件js動態配置轉換多入口js文件
 * @param { string } entry  必須
 * @param { string } outDir 必須
 * @param { string } moduleName 必須
 */
const rollupBuild = (entry,outDir,moduleName)  => {
  return  rollup.rollup({
    input: entry,
    plugins: [
      rollupTypescript()
    ]
  }).then( bundle => {
    return bundle.write({
      file: outDir,
      format:'es',
      name: moduleName,
      sourcemap: true
    })
  }).then(()=>{
    reload({stream:true})
  })
}

const buildHTML = done => {
  pump([
    gulp.src('./test.html'),
    gulp.dest('./dist'),
    reload({stream:true})
  ],done)
}

const buildTs = done => {
  //這里配置多頁面js配置打包就可以了，傳入值改為數組拼接url可以實現多入口插件js打包
  rollupBuild('./src/core/Main.ts', './dist/TEditor.js', 'TEditor')
  done()
}

const browerServer = done => {
  browserSync.init({
    server: {
      baseDir: "./"
    }
  }),
  gulp.watch('./src/core/**/*.ts',gulp.series(buildTs))
  gulp.watch('./*.html',gulp.series(buildHTML))
  gulp.watch('./src/skin/**/*.less',gulp.series(buildCss))
  done()
}
gulp.task('default',gulp.series(buildTs, buildCss, buildHTML,browerServer))

寫的不好別噴，看看就好啦~