Pertanyaan SyntaxError: 'impor' dan 'ekspor' mungkin hanya muncul dengan 'sourceType: module' di Gulp + Babel + TypeScript + Maps Sumber


Saya mencoba mengkompilasi dari .ts untuk .min.js sebagai berikut:

TS --> ES6 ---> ES5 ---> .min.js + .map

Sebelum saya melakukan hal berikut dan semuanya berjalan dengan baik:

TS ---> ES5 --->  .min.js + .map

Saya ingin dapat menggunakan peta sumber. My tsconfig.json adalah sebagai berikut:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "isolatedModules": false,
    "jsx": "react",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false,
    "preserveConstEnums": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

Sejak saya menambahkan "target": "es6" Saya mendapatkan kesalahan:

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

Dokumentasi tsify mengatakan:

Kesalahan ini terjadi ketika file TypeScript tidak dikompilasi ke JavaScript sebelum dijalankan melalui bundel Browserify. Ada beberapa alasan yang diketahui Anda mungkin mengalami ini.

Tetapi dalam tugas Gulp saya menjalankan menjalankan tsify sebelum babelify:

gulp.task("bundle", function() {

  var mainTsFilePath = "src/main.ts";
  var outputFolder   = "bundle/src/";
  var outputFileName = settings.projectName + ".min.js";
  var pkg            = require("./package.json");

  var banner = [
    "/**",
    " * <%= pkg.name %> v.<%= pkg.version %> - <%= pkg.description %>",
    " * Copyright (c) 2015 <%= pkg.author %>",
    " * <%= pkg.license %>",
    " */", ""
  ].join("\n");

  var bundler = browserify({
    debug: true,
    standalone : settings.projectName
  });

  var babelifyConfig = { extensions: ['.js','.jsx','.ts','.tsx'] };

  // TS compiler options are in tsconfig.json file
  return bundler.plugin(tsify)
                // Added this line and target es6
                .transform(babelify.configure(babelifyConfig)) 
                .add(mainTsFilePath)
                .bundle()
                .pipe(source(outputFileName))
                .pipe(buffer())
                .pipe(sourcemaps.init({ loadMaps: true }))
                .pipe(uglify())
                .pipe(header(banner, { pkg : pkg } ))
                .pipe(sourcemaps.write("."))
                .pipe(gulp.dest(outputFolder));
});

Saya baru saja menambahkan kompilasi ES6, sebelum saya menyusun TS ke ES5 dan semuanya bekerja dengan baik (termasuk peta sumber).

Saya tidak tahu apa yang salah. Apakah Anda punya ide? Terima kasih sebelumnya!


8
2017-11-15 11:17


asal


Jawaban:


Tampaknya ada masalah dengan browserify dan penyelesaiannya dari transformasi symlinked. Namun, sejak itu ini berkomitmen yang memanfaatkan fs.realpathSync metode yang mengembalikan path absolut kanonikalisasi, masalah harus diperbaiki. Dan sudah pasti mendarat di 10.2.5 versi dari node-browserify.

Sebagai tersebut oleh James, jika Anda tidak dapat memperbarui ke versi yang lebih baru, Anda dapat memeriksa jawabannya menggunakan realpathify, yang mana perbaikan masalah yang sama.

Bagaimana tegukan dan browerify bekerja bersama agak menarik, karena itu salah satu alat langka untuk benar-benar tidak perlu plugin gulp yang terkait (yang bahkan telah daftar hitam di beberapa titik untuk memaksa pengguna untuk menggunakan paket browserify secara langsung). Alasan mengapa hal itu tidak diperlukan adalah karena faktanya @substack, terutama dikenal sebagai pencipta browserify dan tape, cukup knowledgable (dan saya berasumsi, suka) penggunaan node-stream yang dia gunakan dalam dua proyek ini. Mengingat premis ini, dan fakta bahwa 99% dari plugin gulp hanya memasukkan alat yang ingin mereka gunakan dengan aliran, plugin gulp tidak diperlukan karena browserify sudah menggunakan aliran yang dapat Anda kembalikan dalam tugas Anda.

Sedikit sampingan, dia juga menulis sebuah buku pegangan tentang melakukan streaming di node yang layak dicoba jika Anda ingin memahami lebih lanjut tentang bagaimana tegukan bekerja secara internal.

Mengenai tsify, cara kerjanya sama dengan plugin lain, mengkompilasi file naskah dan meneruskan hasilnya ke aliran untuk proses browserify untuk melanjutkan.


2
2018-05-30 01:00



Alasan mengapa Anda mendapatkan kesalahan dijelaskan dengan baik di Jawaban Aperçu. Pembaruan harus memperbaiki masalah seperti yang disebutkan, tetapi Anda dapat melihat Jawaban James jika Anda tidak dapat melakukannya.

Gulp, Babelify, dan TSify semuanya bekerja bersama untuk mengubah kode Anda dari TypeScript ES2015 menjadi ES5 murni yang kompatibel dengan browser dengan modul. Berikut ini pengantar dasar tentang apa mereka:

  • Meneguk - Pelari tugas yang menggunakan aliran untuk memungkinkan Anda mengelompokkan dan menjalankan tugas-tugas kecil tertentu sekaligus untuk efisiensi dan kesederhanaan dalam pembuatan

  • Babelify - Transformer Browserify yang mengubah file Anda di tempat ke JavaScript murni sebelum bundling, kompatibel dengan browser tergantung pada preset dan plugin Anda; Babel untuk Browserify

  • TSify - Plugin Browserify yang mengkompilasi TypeScript Anda ke JavaScript untuk browser

Dengan menggunakan Gulp, Anda dapat mengatur plugin Browserify untuk mengonversi file TypeScript Anda menjadi file ECMAScript 2015 dalam satu tugas yang mudah. Alih-alih menggunakan gulp-browserify yang masuk daftar hitam, Anda dapat melanjutkan dan cukup gunakan browserify paket karena sudah menggunakan aliran, yang diharapkan Gulp sehingga tidak perlu plugin Gulp tambahan.

Sekarang bagaimana mereka bekerja bersama. Pikirkan Gulp sebagai pabrik yang membuat pai apel, dan tugas Gulp Anda sebagai tugas tertentu yang dilakukan pabrik Anda sehingga dapat menciptakan produk akhir: membuat adonan, membuat isian, memanggang pai, dll. Katakanlah saya ingin membuat mengisi, saya harus mulai dengan:

  • Mengambil beberapa apel dan mengimpornya
  • Transformasi apel dengan jus lemon untuk rasa
  • Pemanasan kemudian menambahkan semua bahan
  • Biarkan mendidih dan dinginkan hingga siap untuk fase berikutnya

Ini seperti bagian-bagian tertentu dari tugas dalam tugas Gulp Anda. Jika saya ingin membuat browser runnable JavaScript dari TypeScript, saya akan sama:

  • Pilih file target saya untuk di transpile
  • Transform file target saya dengan sebuah plugin (TSify) dan kompilasi mereka ke (dalam hal ini) ES2015
  • Transform file target saya dengan transformator (Babelify) untuk memindahkannya dari TSify ES2015 ke ES5 untuk browser

Menerapkan ini ke kode aktual kita mendapatkan ini:

  1. Buat tugas Gulp baru untuk memindahkan kode kita dari TypeScript ES2015 ke ES5 murni
  2. Menggunakan browserify instance dan stream untuk memilih file entri di mana kode akan dipindahkan, lalu meneruskannya ke aliran
  3. Lanjutkan dengan file dalam aliran dengan mendaftarkan plugin, tsify, yang akan menjalankan dan mengonversi file TypeScript Anda dalam aliran ke ES2015 (jika target adalah ES2015), lalu meneruskannya ke aliran
  4. Serahkan file ES2015 baru di streaming ke babelify yang akan mengubah ES2015 menjadi ES5 ramah browser dengan preset tertentu es2015, lalu lewati mereka aliran untuk pipa untuk melanjutkan

Semua bagian bekerja bersama-sama untuk memungkinkan Anda memiliki satu tugas yang melakukan banyak hal, pada akhirnya mengubah TypeScript ke ES5.


1
2018-05-29 22:12



Saya memiliki masalah yang sama, yang disebabkan oleh memiliki symlink di blog saya node_modules. Saya memperbaikinya dengan menambahkan realpathify plugin untuk browserify.

var gulp = require("gulp")
var browserify = require("browserify")
var babelify = require("babelify")
var source = require('vinyl-source-stream')
var tsify = require("tsify")
var sourcemaps = require('gulp-sourcemaps')
var buffer = require('vinyl-buffer');
var realpathify = require('realpathify')

gulp.task("default", function () {

    browserify({
        basedir: '.',
        debug: true,
        cache: {},
        packageCache: {},
        entries: [ 'app/browser.ts' ]
    })
    .plugin(tsify)
    .plugin(realpathify)
    .transform(babelify, {extensions: ['.js', '.ts'], presets: ['es2015']})
    .bundle()
    .on('error', function (error) { report(error) })
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest("dist"))
})

0