Skip to content

Instantly share code, notes, and snippets.

@zthxxx
Last active December 9, 2019 10:56
Show Gist options
  • Save zthxxx/bc7c77d0801cf8c1b4265f762bd4f6db to your computer and use it in GitHub Desktop.
Save zthxxx/bc7c77d0801cf8c1b4265f762bd4f6db to your computer and use it in GitHub Desktop.
compile react component to both es and commonjs modules, with typescript and less in css modules
/**
* compile react component to both es and commonjs modules,
* with typescript and less in css modules
*
* @type {Gulp}
*/
const gulp = require('gulp')
const babel = require('gulp-babel')
const ts = require('gulp-typescript')
const less = require('gulp-less')
const postcss = require('gulp-postcss')
const sourcemaps = require('gulp-sourcemaps')
const rimraf = require('rimraf')
const merge = require('merge2')
// es modules dir
const ES_OUT = 'es'
// commonjs modules dir
const LIB_OUT = 'lib'
const SCOPED_FORMAT = '[name]-[local]-[hash:base64:5]'
const babelCssModulesPlugins = [
[
'transform-rename-import',
{
original: '^(\\.+/.+?)\\.less$',
replacement: '$1.css',
},
],
[
'css-modules-transform',
{
camelCase: true,
keepImport: true,
extensions: ['.css'],
generateScopedName: SCOPED_FORMAT,
},
],
]
const postcssPlugins = [
require('postcss-modules')({
getJSON: () => {},
generateScopedName: SCOPED_FORMAT,
}),
]
const babelPipe = (modules = false) => babel({
presets: [
[
'@babel/preset-env',
{ modules },
],
],
plugins: babelCssModulesPlugins,
})
const tsProject = ts.createProject('tsconfig.json')
gulp.task('clean', (done) => {
rimraf.sync(`{${ES_OUT},${LIB_OUT},dist,build}`)
return done()
})
gulp.task('copyAssets', () => (
gulp.src('./src/**/*')
.pipe(gulp.dest(`./${ES_OUT}`))
.pipe(gulp.dest(`./${LIB_OUT}`))
))
gulp.task('compileLess', () => (
gulp.src('./src/**/*.less')
.pipe(less())
.pipe(gulp.dest(`./${ES_OUT}`))
.pipe(gulp.dest(`./${LIB_OUT}`))
))
gulp.task('postcss', () =>
merge([
gulp.src(`./${ES_OUT}/**/*.css`)
.pipe(postcss(postcssPlugins))
.pipe(gulp.dest(`./${ES_OUT}`)),
gulp.src(`./${LIB_OUT}/**/*.css`)
.pipe(postcss(postcssPlugins))
.pipe(gulp.dest(`./${LIB_OUT}`)),
]),
)
gulp.task('compileTS', () => {
const tsResult = gulp.src('./src/**/*.{ts,tsx}')
.pipe(tsProject())
return merge([
tsResult.dts
.pipe(gulp.dest(`./${ES_OUT}`))
.pipe(gulp.dest(`./${LIB_OUT}`)),
tsResult.js
.pipe(gulp.dest(`./${ES_OUT}`))
.pipe(gulp.dest(`./${LIB_OUT}`)),
])
})
gulp.task('compileES', () => (
gulp.src(`./${ES_OUT}/**/*.{js,jsx}`)
.pipe(sourcemaps.init())
.pipe(babelPipe())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(`./${ES_OUT}`))
))
gulp.task('compileLib', () => (
gulp.src(`./${LIB_OUT}/**/*.{js,jsx}`)
.pipe(sourcemaps.init())
.pipe(babelPipe('commonjs'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(`./${LIB_OUT}`))
))
gulp.task('cleanJSX', (done) => {
rimraf.sync(`./{${ES_OUT},${LIB_OUT}}/**/*{.jsx,[^.d].ts,.tsx,.less}`)
return done()
})
gulp.task('default', gulp.series(
'clean',
'copyAssets',
gulp.parallel(
'compileLess',
'compileTS',
),
gulp.parallel(
'compileES',
'compileLib',
),
gulp.parallel(
'postcss',
'cleanJSX',
),
))
{
"compilerOptions": {
"baseUrl": ".",
"outDir": "dist",
"module": "esnext",
"target": "esnext",
"lib": ["esnext", "dom"],
"sourceMap": true,
"jsx": "preserve",
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedParameters": true,
"noUnusedLocals": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"declaration": true,
"paths": {
"src/*": ["./src/*"]
}
},
"exclude": ["node_modules", "scripts", "dist", "es", "lib", "build", "./*.js"]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment