Question

我正在编写一个使用Babel，Webpack和React的离线优先编码教育应用程序。我的目标之一是允许学生在浏览器中使用导入编写符合ES6的javascript代码。我想让学生在文本编辑器中编写ES6模块，为它们命名，并将它们视为可以从其他ES6模块调用的模块。

我希望他们不必将代码上传到服务器，因为这是一个离线组件。我也希望在实施过程中避免服务工作者，因此这不仅仅适用于Chrome和Firefox。

我想象一个像这样的组件：

// React Component
import Babel from 'babel';
class JSEditor extends Component {

render(){

 module1;  // contains code from first module
 module2;  // contains code from second module

return (
<textarea>
let module1 = "const foo = 42;  export default foo;'; 
</textarea>

<textarea>
let module2 = "import foo from 'module1';  console.log(foo);" 
</textarea>

<button onclick={this.evalCode} />
)
 // what goes here?
evalCode() {
     let code1 = Babel.transform(this.module1);
     let code2 = Babel.transform(this.module2); 
     eval(code2);

 }
}

当我以这种方式进行Babel.transform时，它不会返回或理解我需要的模块格式。我如何说服Babel让我使用没有实际文件的模块？

从浏览器中的字符串导入浏览器中的ES6模块，而不是文件

0 个答案: