通过 grunt-babel 使用 transform-es2015-modules-amd 进行额外定义
Extra define with transform-es2015-modules-amd via grunt-babel
输入文件
import Logger from "logger";
export default class Greeter {
constructor(name) {
this.name = name || '';
console.log('Hello', name);
}
notify() {
console.log('It is my duty to inform you that this JS is ES6!');
}
getName() {
Logger.log('Called getName');
return this.name;
}
}
输出文件,通过 grunt
define([], function () {
define(['exports', 'logger'], function (exports, _logger) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _logger2 = _interopRequireDefault(_logger);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
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;
};
}();
var Greeter = function () {
function Greeter(name) {
_classCallCheck(this, Greeter);
this.name = name || '';
console.log('Hello', name);
}
_createClass(Greeter, [{
key: 'notify',
value: function notify() {
console.log('It is my duty to inform you that this JS is ES6!');
}
}, {
key: 'getName',
value: function getName() {
_logger2.default.log('Called getName');
return this.name;
}
}]);
return Greeter;
}();
exports.default = Greeter;
});
});
输出文件,通过 CLI
define(['exports', 'logger'], function (exports, _logger) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _logger2 = _interopRequireDefault(_logger);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
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;
};
}();
var Greeter = function () {
function Greeter(name) {
_classCallCheck(this, Greeter);
this.name = name || '';
console.log('Hello', name);
}
_createClass(Greeter, [{
key: 'notify',
value: function notify() {
console.log('It is my duty to inform you that this JS is ES6!');
}
}, {
key: 'getName',
value: function getName() {
_logger2.default.log('Called getName');
return this.name;
}
}]);
return Greeter;
}();
exports.default = Greeter;
});
.babelrc
{
"presets": ["es2015"],
"plugins": ["transform-es2015-modules-amd"]
}
我 运行 遇到这种奇怪的行为,当我通过 grunt-babel 插件进行转换时,额外的 define()
被添加到我的 ES5 源代码中。我已经分叉了 repo 并将 babel-core 和 babel-preset-es2015 更新到最新版本,但没有帮助。
深入研究 babel-grunt,看起来 babel.transformFileSync
用于进行转换。在 babel-cli 包中,它看起来像 babel.tranform
被使用。但是 babel.transformFileSync
只是读取一个文件并将内容传递给 babel.tranform
.
我觉得我缺少一些小的配置选项或某处。谁能看到我错过了什么?
我找到了我的问题。在我的 Gruntfile.js
中,我正在读取 .babelrc
文件中的 JSON 字符串并将其传递到选项对象中。这似乎导致了双重定义。删除后问题自行解决。
不确定为什么会导致此行为,但现在已得到解决。
输入文件
import Logger from "logger";
export default class Greeter {
constructor(name) {
this.name = name || '';
console.log('Hello', name);
}
notify() {
console.log('It is my duty to inform you that this JS is ES6!');
}
getName() {
Logger.log('Called getName');
return this.name;
}
}
输出文件,通过 grunt
define([], function () {
define(['exports', 'logger'], function (exports, _logger) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _logger2 = _interopRequireDefault(_logger);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
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;
};
}();
var Greeter = function () {
function Greeter(name) {
_classCallCheck(this, Greeter);
this.name = name || '';
console.log('Hello', name);
}
_createClass(Greeter, [{
key: 'notify',
value: function notify() {
console.log('It is my duty to inform you that this JS is ES6!');
}
}, {
key: 'getName',
value: function getName() {
_logger2.default.log('Called getName');
return this.name;
}
}]);
return Greeter;
}();
exports.default = Greeter;
});
});
输出文件,通过 CLI
define(['exports', 'logger'], function (exports, _logger) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _logger2 = _interopRequireDefault(_logger);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
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;
};
}();
var Greeter = function () {
function Greeter(name) {
_classCallCheck(this, Greeter);
this.name = name || '';
console.log('Hello', name);
}
_createClass(Greeter, [{
key: 'notify',
value: function notify() {
console.log('It is my duty to inform you that this JS is ES6!');
}
}, {
key: 'getName',
value: function getName() {
_logger2.default.log('Called getName');
return this.name;
}
}]);
return Greeter;
}();
exports.default = Greeter;
});
.babelrc
{
"presets": ["es2015"],
"plugins": ["transform-es2015-modules-amd"]
}
我 运行 遇到这种奇怪的行为,当我通过 grunt-babel 插件进行转换时,额外的 define()
被添加到我的 ES5 源代码中。我已经分叉了 repo 并将 babel-core 和 babel-preset-es2015 更新到最新版本,但没有帮助。
深入研究 babel-grunt,看起来 babel.transformFileSync
用于进行转换。在 babel-cli 包中,它看起来像 babel.tranform
被使用。但是 babel.transformFileSync
只是读取一个文件并将内容传递给 babel.tranform
.
我觉得我缺少一些小的配置选项或某处。谁能看到我错过了什么?
我找到了我的问题。在我的 Gruntfile.js
中,我正在读取 .babelrc
文件中的 JSON 字符串并将其传递到选项对象中。这似乎导致了双重定义。删除后问题自行解决。
不确定为什么会导致此行为,但现在已得到解决。