Я пытаюсь создать полезный рабочий процесс, используя gulp
, closure-compiler
и typescript
с использованием модулей npm, размещенных у частного репозитория синопии.Проблемы с построением рабочего процесса закрытия-компилятора/машинописного интерфейса
Конечная цель заключается в следующем:
Развивать с browserify и машинописи, а также публиковать общий код для частного хранилища НПМ.
Чтобы впоследствии оптимизировать проект веб-приложения, используя компилятор закрытия.
(Closure компилятор не обязательно, UglifyJS не выполняет уровень оптимизации, я хочу с точки зрения размера файла и производительности)
Это все прекрасно работает, когда мой проект полностью самодостаточной в моем источник дерево (т.е. у меня не npm install
-й изд любых модулей Вот рабочий gulpfile:.
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var size = require('gulp-size');
var server = require('gulp-live-server');
var typescript = require('gulp-typescript');
var closureCompiler = require('gulp-closure-compiler');
/** No minification */
gulp.task('compile-dev', function() {
console.log("compile-dev at "+new Date())
var b = browserify({baseDir: "src", debug: true})
.add("src/main.ts")
.plugin('tsify', { noImplicitAny: true, target: "es6"});
b.bundle()
.on('error', function(error) {
console.error(error.toString());
})
.pipe(source("out.js"))
.pipe(gulp.dest("www"))
})
/* minify with closure */
gulp.task('compile-closure', function() {
gulp.src('src/**/*.ts')
.pipe(typescript({target: "es6"}))
.pipe(gulp.dest("build"))
.pipe(closureCompiler({
fileName: "out.js",
compilerFlags: {
language_in: "ES6",
language_out: "ES5",
compilation_level: "ADVANCED_OPTIMIZATIONS"
}
}))
.pipe(gulp.dest("www"))
.pipe(size({gzip: true, showFiles: true }))
});
Сейчас я бег на три взаимосвязанные проблемы с использованием модулей:
публикация пакета npm и компиляция проекта верхнего уровня с помощью файла машинописного текста
target: "es6"
вызывает просмотр в задачеcompile-dev
, чтобы задохнуться сParseError: 'import' and 'export' may appear only with 'sourceType: module'
. Если я скомпилирую модуль с машинописным текстомtarget: "es5"
, мы вернемся и работаем дляcompile-dev
, так что фактически в этом смыслеcompile-dev
работает отлично, предполагая, что я нацелен на «es5» всюду.движется вниз к «ES5», вызывает закрытие компилятор давиться
Error: build/main.js:2: WARNING - dangerous use of the global this object var __extends = (this && this.__extends) || function (d, b) {
- замыкание не нравится потреблять ES5, что машинопись производитесли придерживаться «ES6» для цели машинопись, не только блокирует дроссель на
compile-dev
, но закрытие также (возможно, по понятным причинам) все еще не может найти мою библиотеку, потому что она не знает, что посмотреть в node_modules, если яimport Foo from "bar"
.
Так как я могу:
- прибудет затворные компилятор смотреть в node_modules, когда я требую от внешней библиотеки (без ./)?
- разрешить браузеру использовать эти модули es6 в npm?
Я работаю над поддержкой закрытия-компилятора, чтобы иметь возможность искать зависимости 'node_modules'. Хотя это еще не вариант. –
Вы должны уметь определять корни модуля es6, чтобы компилятор Closure мог найти модуль. – John
@ Джон, как я могу это сделать? Из документа кажется, что «пути должны быть абсолютными или относительными», поэтому мне не кажется, что закрытие может найти модуль с именем «foo» - скорее, его нужно будет импортировать как «»./ foo "' – mseddon