如何使用gulp编译打字稿浏览器节点模块?

时间:2017-11-15 23:05:52

标签: javascript typescript gulp browserify node-modules

我正在用TypeScript编写一个Web应用程序,它是使用Gulp,Tsify和Browserify编译的。这可以确保将数百个TypeScript文件捆绑在一起形成一个JavaScript文件。

这种方法运行良好一段时间,但是当我的代码库变得如此之大以至于我决定将应用程序的各个部分拆分为不同的模块时,就会出现问题。 (另外,将模块包含为../../../../mountain而不仅仅是mountain是非常麻烦的)为此,我决定使用默认的node_modules目录和Node.js的模块解析;希望这对于浏览器应用程序同样适用于Node.js应用程序。它没有。

我创建了一个较小的类似项目,它遵循类似的目录结构和设置,我将在这里进行说明。

目录结构:

build/               # Destination directory
  - script.js        # File that should be created by Gulp
client/
  - src/
    - main.ts        # Application main
  - node_modules/    # Contains all my self-written modules
    - mountain/      # Example module
      - index.ts     # Module main
      - package.json # Module package.json (states index.ts as main)
node_modules/        # Contains all build-modules. (Gulp, etc.)
  - ...
gulpfile.js
package.json

client/src/main.ts包含:

import { foo } from 'mountain';
foo( );

client/node_modules/mountain/index.ts包含:

export function foo( ) {
  console.log( 'Hello World' );
}

gulpfile.js包含:

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var tsify = require('tsify');

function compile( ) {
  var bundler = browserify( './client/src/main.ts', { debug: true } )
      .plugin( 'tsify', { target: 'es6', project: './client/src/' } );

  bundler.bundle()
      .on('error', function(err) { console.error(err); this.emit('end'); })
      .pipe(source( 'script.js' ))
      .pipe(gulp.dest( './build' ));
}

gulp.task('default', ( ) => compile( ) );

如果mountain中的node_modules模块不存在,而是包含在src目录中(并且引用为./mountain),那么这样可以正常工作。但是,如果在外部定义此模块,则会导致以下错误:

export function foo( ) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

现在这似乎是因为Browserify没有编译并包含node_modules中的打字稿文件。虽然我不知道这个问题的确切原因是什么,也不知道如何解决。

有没有人有建立像这样的开发环境的经验?如何解决我的问题,以便正确编译?或者是否有其他方法可以保持我的模块依赖关系完全分开?

请注意,我知道之前的帖子中出现了相同的错误消息:

但是,我的问题不在于在默认设置中设置browserify。因为此前工作正常。相反,这个问题与设置它有关,它适用于自编写的模块。此外,我尝试将这些解决方案应用于我的问题,尽管没有成功。

0 个答案:

没有答案