Javascript 6to5（现为Babel）导出模块使用 [英] Javascript 6to5 (now Babel) export module usage

问题描述

我还是一个初学者，我尝试将一个类导出和导入一个主文件，另一个类在其他类文件中使用。

然后用6to5（现在的Babel）填充ES5代码。

  //文件a.js 
从'b.js'导入B; 
 
 class A {
 constructor（）{
 B.methodB（）; 
} 
} 
 
 export default A; 
 
 // file b.js 
 class B {
 methodB（）{
 console.log（'hi from b'）; 
} 
} 
 
导出默认B; 
 
 //文件main.js 
从'a.js'导入A; 
 new A（）; 
  

我的gulpfile：

  var gulp = require（'gulp'）; 
 var to5 = require（'gulp-6to5'）; 
 
 gulp.task（'default'，function（）{
 return gulp.src（'main.js'）
 .pipe（to5（））
 .pipe（gulp.dest（'dist'））; 
}）; 
  

这是我的 dist / main.js file：

 use strict; 
 
 var _interopRequire = function（obj）{
 return obj&&& （obj [default] || obj）; 
}; 
 
 var A = _interopRequire（require（a.js））; 
 
 new A（）; 
  

控制台中的错误： ReferenceError：require未定义

哪些当然不行？我做错什么还是缺少什​​么？我没有得到它。

解决方案

我在自己之前有完全相同的问题...如同Qantas在评论中提到的，Babel（以前的6to5）将转换语法，但它不会执行模块加载或polyfills。

我发现最简单的工作流程是使用 browserify with 一饮而尽。这样可以在一次命中中处理透析，添加聚合物，捆绑，缩小和源地图生成。这个问题有一个非常好的例子： Gulp + browserify + 6to5 +源地图。

此版本添加了细化和聚合物填充。你的案例的例子如下所示：

  let gulp = require（'gulp'）; 
 let browserify = require（'browserify'）; 
 let babelify = require（'babelify'）; 
 let util = require（'gulp-util'）; 
 let buffer = require（'vinyl-buffer'）; 
 let source = require（'vinyl-source-stream'）; 
 let uglify = require（'gulp-uglify'）; 
 let sourcemaps = require（'gulp-sourcemaps'）; 
 
 gulp.task（'build：demo'，（）=> {
 browserify（'./ demo / app.js'，{debug：true}）
 .add（require.resolve（'babel-polyfill / dist / polyfill.min.js'））
 .transform（babelify.configure（{presets：['es2015'，'es2016'，'stage-0' ，'stage-3']}））
 .bundle（）
 .on（'error'，util.log.bind（util，'Browserify Error'））
 .pipe source（'demo.js'）
 .pipe（buffer（））
 .pipe（sourcemaps.init（{loadMaps：true}））
 .pipe（uglify（{mangle： false}））
 .pipe（sourcemaps.write（'./'））
 .pipe（gulp.dest（'./ demo'））; 
}）; 
 
 gulp.task（'default'，['build：demo']）; 
  

重要的是，uglify的mangle设置为false;如果您没有安装所有依赖项，您可能需要创建一个<$ c $（$）

c> package.json 文件，并确保以下包定义在依赖关系对象：

 devDependencies：{
babel-polyfill： ^ 6.13.0，
babel-preset-es2015：^ 6.13.0，
babel-preset-es2016：^ 6.11.0，
babel -preset-stage-0：^ 6.5.0，
babel-preset-stage-3：^ 6.11.0，
babelify：^ 7.3.0 ，
browserify：^ 13.1.0，
gulp：^ 3.9.0，
gulp-sourcemaps：^ 1.6.0，
gulp-uglify：^ 2.0.0，
gulp-util：^ 3.0.0，
vinyl-buffer：^ 1.0.0，
vinyl-source-stream：^ 1.1.0
} 
  

如果安装了 -g ，大多数这些将不起作用，所以c你本人警告：P

然后，只需运行 npm install 来安装所有依赖项，而$ code> gulp 来运行默认的任务并转载所有的代码。

你的其他文件看起来不错，你有正确的想法导入在每个文件的开头，并导出您的默认值:)如果您想要一些在野外的巴西的ES6的例子，我有一个可能有帮助的GitHub上的几个项目。

I'm still a beginner, i try to to export and import one class into a main file, the other class in the others class file and use them.

And then gulp ES5 code with 6to5 (now Babel).

// file a.js
import B from 'b.js';

class A {
  constructor() {
    B.methodB();
  }
}

export default A;

// file b.js
class B {
  methodB() {
    console.log('hi from b');
  }
}

export default B;

// file main.js
import A from 'a.js';
new A();

My gulpfile:

var gulp = require('gulp');
var to5 = require('gulp-6to5');

gulp.task('default', function () {
  return gulp.src('main.js')
    .pipe(to5())
    .pipe(gulp.dest('dist'));
 });

And this is my dist/main.js file:

"use strict";

var _interopRequire = function (obj) {
  return obj && (obj["default"] || obj);
};

var A = _interopRequire(require("a.js"));

new A();

The error in console: ReferenceError: require is not defined

Which of course does not work ... what am I doing wrong or what lack I yet? I do not get it exactly.

解决方案

I was having the exact same problem before myself... As Qantas mentioned in the comments, Babel (formerly 6to5) will convert syntax, but it won't do module loading or polyfills.

I've found the easiest workflow is using browserify with gulp. This takes care of transpiling, adding polyfills, bundling, minification, and source map generation in one hit. This question has a pretty nice example: Gulp + browserify + 6to5 + source maps.

This version adds minification and polyfills. An example for your case would look like this:

let gulp = require('gulp');
let browserify = require('browserify');
let babelify = require('babelify');
let util = require('gulp-util');
let buffer = require('vinyl-buffer');
let source = require('vinyl-source-stream');
let uglify = require('gulp-uglify');
let sourcemaps = require('gulp-sourcemaps');

gulp.task('build:demo', () => {
    browserify('./demo/app.js', { debug: true })
    .add(require.resolve('babel-polyfill/dist/polyfill.min.js'))
    .transform(babelify.configure({ presets: ['es2015', 'es2016', 'stage-0', 'stage-3'] }))
    .bundle()
    .on('error', util.log.bind(util, 'Browserify Error'))
    .pipe(source('demo.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(uglify({ mangle: false }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./demo'));
});

gulp.task('default', ['build:demo']);

It's important that uglify has mangle set to false; it really doesn't seem to play nice with the transformed code.

If you don't have all the dependencies installed, you may want to create a package.json file, and ensure that following packages are defined in the dependencies object:

"devDependencies": {
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.13.0",
    "babel-preset-es2016": "^6.11.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-preset-stage-3": "^6.11.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.0",
    "gulp": "^3.9.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.0",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
}

Most of these won't work if installed with -g, so consider yourself warned :P

Then, just run npm install to install all the dependencies, and gulp to run the default task and transpile all of your code.

Your other files look good, you have the right idea with importing at the beginning of each file and exporting your defaults :) If you want some examples of babelified ES6 in the wild, I have a couple of projects on GitHub that might help.

这篇关于Javascript 6to5（现为Babel）导出模块使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！