ReactJS.net - 如何使用ES6模块

时间:2015-11-07 21:19:36

标签: reactjs.net

我已成功运行ReactJS.Net,包括使用ES6语法。

我正在使用默认的Jsx转换管道,它正在使用Babel。 在浏览器中查看源代码我可以看到ES6代码已被ReactJS.Net转换为ES5

我无法让模块正常工作。

浏览器给了我2个错误:

Uncaught ReferenceError: exports is not defined
Uncaught ReferenceError: require is not defined

如何使用ES6模块?

最简单的例子:

Lib.js

export function square(x) {
    return x * x;
}

UserOfLib.js

import { square } from 'Lib';
console.log(square(11)); 

转换为此(查看浏览器源代码):

库:

// @hash v3-AD133907ABEC5D32B3768A3AF2301FC9
// Automatically generated by ReactJS.NET. Do not edit, your changes will be overridden.
// Version: 2.0.1 (build 5e9476a)
// Generated at: 08-Nov-15 6:40:26 AM
///////////////////////////////////////////////////////////////////////////////
Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.square = square;

function square(x) {
    return x * x;
}

UserOfLib:

// @hash v3-812C209AFED25C2B4507E5769B0D899B
// Automatically generated by ReactJS.NET. Do not edit, your changes will be overridden.
// Version: 2.0.1 (build 5e9476a)
// Generated at: 08-Nov-15 6:40:26 AM
///////////////////////////////////////////////////////////////////////////////
var _Lib = require('Lib');

console.log((0, _Lib.square)(11)); // 121

1 个答案:

答案 0 :(得分:9)

目前,ReactJS.Net不处理模块。如果要使用模块,则需要使用模块捆绑器(如Webpack或Browserify)将模块编译为vanilla JavaScript。在ReactJS.NET本身中实现对模块的支持是一项非常重要的工作,因为它需要以正确的顺序处理依赖关系和加载模块,并且已经存在经过良好测试的解决方案,如Webpack。