ES6 babelify导入特定功能

时间:2019-01-30 11:22:29

标签: javascript ecmascript-6 gulp tree-shaking

我主要是一名后端开发人员,但我试图使自己的JavaScript功能现代化。

我已经在Es6中编写了一个测试文件,如下所示:

export const TestA = () => {
    console.log("test A");
}

export const TestB = () => {
    console.log("test B");
}

因此,我想对其进行设置,以便可以根据需要将TestA和TestB导入脚本中,如下所示:

import { TestA } from '../../includes/Sample.js';

$(function() {
    TestA();
});

在我看来,第二个脚本应该在我通过诸如gulp这样的脚本运行时,导入TestA并忽略TestB:

return browserify({
            entries: [path.join(pathToCompileFoler, file)]
        })
        .transform(babelify.configure({
            presets: ['es2015'],
            ignore: /(bower_components)|(node_modules)/
        }))
        .bundle()
        .on("error", function(err) { console.log("Error : " + err.message); })
        .pipe(source(file))
        .pipe(gulp.dest(path.join(pathOutput, "/")));

但是,当我查看此转录产生的内容时,我发现TestA和TestB都已写入到我新转录的文件中:

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

Object.defineProperty(exports, "__esModule", {
    value: true
});
var TestA = exports.TestA = function TestA() {
    console.log("test A");
};

var TestB = exports.TestB = function TestB() {
    console.log("test B");
};

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

var _Sample = require('../../includes/Sample.js');

$(function () {
    (0, _Sample.TestA)();
});

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

在我看来,es6的好处之一是摇树(仅占用我需要的位)

我在这里错过了什么吗?还是这种预期的行为?

0 个答案:

没有答案