[英]gulp babel, exports is not defined
Consider the following example code (and maybe I am doing it wrong?)考虑以下示例代码(也许我做错了?)
var FlareCurrency = {
};
export {FlareCurrency};
I have the following task:我有以下任务:
gulp.task("compile:add-new-currency-minified", function(){
return gulp.src('src/add-new-currency/**/*.js')
.pipe(babel())
.pipe(concat('Flare-AddNewCurrency.js'))
.pipe(uglify({"preserveComments": "all"}))
.pipe(gulp.dest('dist/minified/'));
});
When I run this I get the following:当我运行它时,我得到以下信息:
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var FlareCurrency={};exports.FlareCurrency=FlareCurrency;
For the fun of it, I wanted to run it in the console, yes I know it does nothing but I didn't expect to see this:为了好玩,我想在控制台中运行它,是的,我知道它什么都不做,但我没想到会看到这个:
Uncaught ReferenceError: exports is not defined(…)
The non minified version:非缩小版:
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var FlareCurrency = {};
exports.FlareCurrency = FlareCurrency;
throws the same error.抛出同样的错误。 Ideas?想法?
That is not actually a babel issue, you are just trying to run CommonJS code (transpiled from ES6 export
) in the browser without preparation. 这实际上不是一个通天的问题,您只是试图在浏览器中运行CommonJS代码(从ES6 export
编译而来)而没有准备。 CommonJS doesn't run on the browser, you need to use a tool to package it for the browser, such as Webpack or Browserify . CommonJS不在浏览器上运行,您需要使用一个工具将其打包为浏览器,例如Webpack或Browserify 。
Just by coincidence this week I created a small project on Github that shows a setup of Gulp + ES6 code (using export
) + Babel + Webpack: gulp-es6-webpack-example . 碰巧的是,本周,我在Github上创建了一个小项目,该项目显示了Gulp + ES6代码(使用export
)+ Babel + Webpack的设置: gulp-es6-webpack-example 。
In my example you can load JS code on the browser either synchronously (pre-loaded) or asynchronously (lazy-loaded). 在我的示例中,您可以同步(预加载)或异步(延迟加载)在浏览器上加载JS代码。
I fix it just set se6
for settings gulp-typescript
package:我修复它只是为设置se6
gulp-typescript
typescript package 设置 se6:
import gulp from 'gulp'; import ts from 'gulp-typescript'; import uglify from 'gulp-uglify'; import browserSync from 'browser-sync'; export const scripts = () => { return gulp.src(['app/scripts/*', '.app/scripts/modules/']):pipe(ts({ noImplicitAny, true: target. "es6" // <<< THIS })).pipe(uglify()).pipe(gulp.dest('dist/scripts/')).pipe(browserSync.stream()) }
Besides you have to set type="module"
for connect your js file in html.此外,您必须设置type="module"
以连接 html 中的 js 文件。
<script type="module" src="scripts/index.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.