使用 gulp 和 babel 在单独文件中定义的 ES6 函数答案

【问题标题】：Use ES6 functions defined in a separate file with gulp and babel使用 gulp 和 babel 在单独文件中定义的 ES6 函数
【发布时间】：2016-01-19 21:05:30
【问题描述】：

一段时间以来，我一直试图将我的代码拆分为几个文件，然后用 babel 编译并合并到一个文件中。

我有两个文件，functions.js 和 main.js

functions.js 看起来像：

//distance between two points
const distance = (p1, p2) => Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));

//slope of line through p1, p2
const slope = (p1, p2) => (p2.x - p1.x) / (p2.y - p1.y);

//etc.

那么main.js中的代码需要用到这些函数。我的 gulpfile 看起来像：

'use strict';

var projectname = 'canvas-test',
  template_path = '',
  scss_path = template_path + 'scss/**/*.scss',
  es2015_path = template_path + 'es2015/**/*.js',
  scripts_path = template_path + 'scripts/',
  gulp = require('gulp'),
  watch = require('gulp-watch'),
  babel = require('gulp-babel'),
  livereload = require('gulp-livereload'),
  concat = require('gulp-concat');

//Put all javascript tasks here
gulp.task('js', function() {
  return gulp.src(es2015_path + '/**/*.js')
    .pipe(concat('main.js'))
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest(scripts_path))
    .pipe(livereload());
});

//default task
gulp.task('default', ['js'], function() {
  livereload.listen();
  gulp.watch(es2015_path, ['js']);
});

./scripts/main.js 文件已成功编译、连接和创建，但是我无法使用这些函数，因为它们被包裹在 babel 添加的混乱闭包中：

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

///COMPILED CODE FROM FUNCTIONS.JS HERE


},{}],2:[function(require,module,exports){
'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

//COMPILED CODE FROM MAIN.JS HERE


},{"./functions.js":1}]},{},[2]);

我花了很长时间寻找解决方案，尝试使用 bBrowserify 和其他一些东西，但无济于事。有什么简单的方法吗？

【问题讨论】：

了解模块：2ality.com/2014/09/es6-modules-final.html、developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…、developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…、
谢谢，但我已经花了很长时间试图让导出工作无济于事。首先，我读过的任何文档都不清楚导出是否可以与 gulp/babel 一起使用，然后我尝试了许多与您链接的页面不同的变体，例如：在 functions.js: export const distance = (p1,p2) -> {...} OR const distance = (p1,p2) -> {...}; export {distance } in main.js: import distance from 'functions' OR import * as name from './functions.js' 等等。结果总是一样的：Uncaught ReferenceError: distance is not defined
如果您使用命名导出 (export const foo = ...;)，那么您还必须使用命名导入：import {foo} from '...';)。如果您正在使用模块，则必须使用模块捆绑器，例如 browserify，您不能简单地连接文件。 Gulp/babel 不在乎你是否使用模块，它们一次只查看一个文件。
正如我提到的，我已经花了很长时间试图让 browserify 与 export 或 require 语句一起工作，但无济于事。正如您从我之前的评论中看到的那样，命名导出的东西也不适合我。我这次采用的方法是在 babel 编译它们之前尝试连接文件。这不可能吗？

标签： javascript gulp ecmascript-6 babeljs gulp-concat

【解决方案1】：

很抱歉，如果这很明显，您是否尝试过交换 babel 转译的顺序？

我记得在 babel 之前调用 concat 有一些愚蠢的行为。我通常通过管道输入 babel，然后 concat/uglify/rename 等。

【讨论】：