2016-04-08 2 views
0

Я пытаюсь создать полезный рабочий процесс, используя 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?
+1

Я работаю над поддержкой закрытия-компилятора, чтобы иметь возможность искать зависимости 'node_modules'. Хотя это еще не вариант. –

+1

Вы должны уметь определять корни модуля es6, чтобы компилятор Closure мог найти модуль. – John

+0

@ Джон, как я могу это сделать? Из документа кажется, что «пути должны быть абсолютными или относительными», поэтому мне не кажется, что закрытие может найти модуль с именем «foo» - скорее, его нужно будет импортировать как «»./ foo "' – mseddon

ответ

1

Это еще не возможно с компилятором закрытия, поскольку компилятор не знает, как искать именованные модули. Единственный вариант - использовать связной, который может исключить ссылки на именованные модули до компиляции.

Смежные вопросы