使用在一個單獨的文件中定義的ES6函數與吞嚥和巴貝爾

我一直試圖將我的代碼拆分成幾個文件，然後用babel編譯併合併成一個文件一段時間。使用在一個單獨的文件中定義的ES6函數與吞嚥和巴貝爾

我有兩個文件，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編譯，concated併成功創建了，不過，我可以不使用的功能，因爲它們被包裹在由巴別加了凌亂關閉：

(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和其他一些東西，但無濟於事。有沒有簡單的方法來做到這一點？

來源

2016-01-19 looeee

瞭解模塊：http://www.2ality.com/2014/09/es6-modules-final.html，https：//developer.mozilla .org/en-US/docs/Web/JavaScript/Reference/Statements/export，https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import， –

謝謝，但我已經花了很長時間試圖讓出口無濟於事。首先，我讀過的任何文檔都不太清楚導出是否可以與gulp/babel一起工作，然後我嘗試了很多來自鏈接頁面的不同變體，例如：在functions.js中： _export const distance =（p1，p2） - > {...} _ 或_const distance =（p1，p2） - > {...}; _ _export {distance} _ in main.js：從'functions'__ 或__從[./functions.js'_等等名稱中導入*。結果總是相同的：_Uncaught ReferenceError：distance is not defined_ – looeee

如果您使用的是命名導出（'export const foo = ...;'），那麼您還必須使用命名導入：'import {foo} from '...';'）。如果您正在使用模塊，則必須使用模塊捆綁器，如browserify，但不能簡單地將這些文件連接起來。 Gulp/babel不關心你是否使用模塊，他們一次只查看一個文件。 –

對不起，如果這是顯而易見的，你有嘗試交換巴貝爾transpiles的順序？

我記得致電CONCAT前通天有一些愚蠢的行爲。我一般管巴貝爾然後concat/uglify/rename等。

來源

2016-01-24 08:06:00

使用在一個單獨的文件中定義的ES6函數與吞嚥和巴貝爾

回答

相關問題