Add browser support via babel #440
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| 10.12.0 | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| const gulp = require('gulp'); | ||
| const babel = require('gulp-babel'); | ||
| const sourcemaps = require('gulp-sourcemaps'); | ||
| const ts = require('gulp-typescript'); | ||
| const gulpif = require('gulp-if'); | ||
|
|
||
| const tsProj = ts.createProject('tsconfig.json'); | ||
|
|
||
| const babelConfig = { | ||
| "presets": [ | ||
| // Target supported browser environments | ||
| ["@babel/preset-env", { "targets": "> 0.25%, not dead" }] | ||
| ], | ||
| "plugins": [ | ||
| // Enable generator runtime support | ||
| ["@babel/plugin-transform-runtime", { "regenerator": true }] | ||
| ], | ||
| }; | ||
|
|
||
| function build() { | ||
| return gulp.src('src/**/*.ts') | ||
| .pipe(sourcemaps.init()) | ||
| .pipe(tsProj()) | ||
|
There was a problem hiding this comment. I've seen projects where they translate the .ts directly into .js using babel with @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread. That approach is discussed in a blog entry from the typescript team. The tsc command in that approach is only used for error checking. The approach you have here seems to run tsc and babel differently with the tsc output feeding into babel. Can you explain why you chose that approach? There was a problem hiding this comment. Webpack has the same problem as rollup: it was mainly designed to bundle JS into one file. Good for shipping to browser only for HTTP1 concerns, but for libraries it is best to ship in multiple formats and let the user decide how they would like to consume it. Gulp is the easiest way to allow that. Let me know if you would like me to keep updating this PR. There was a problem hiding this comment. Ah I see your question was not about webpack (which recommends uses this method for compiling TS) specifically. I still standby my point that it is better to ship in multiple formats, which gulp is better designed for. |
||
| .pipe(gulpif(/[.]js$/, babel(babelConfig))) | ||
| .pipe(sourcemaps.write('.')) | ||
| .pipe(gulp.dest('target/src')); | ||
| }; | ||
|
|
||
| exports.default = build; | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Our convention is to always have a newline at the end of all files. The file '.editorconfig' generally fixes this, but your editor may not be using it. There are plugins, e.g. I use an editorconfig add-in for vscode.
Can you explain the effect of adding this .nvmrc file? Does it work with the original nvm, nvm-windows, or both?