问题标签 [es6-module-loader]

我正在使用vue-loader来构建我的*.vue单文件组件，但是在从另一个扩展单文件组件的过程中遇到了麻烦。

如果一个组件遵循规范export default { [component "Foo" definition] }，我认为这只是导入这个组件的问题（就像我对任何子组件一样）然后export default Foo.extend({ [extended component definition] })

不幸的是，这不起作用。任何人都可以提供建议吗？

我一直在学习 Webpack 教程。在其中一个部分中，它给出了包含该问题的一行本质的代码示例：

在该教程的下一部分，标题为“代码拆分”，上面定义的类是按需加载的，如下所示：

不幸的是，这段代码抛出了一个异常：

现在，我知道包含 ES6 模块的正确方法是简单地import Button from './Components/Button';放在文件的顶部，但是在文件的其他任何地方使用类似的构造会使 babel 成为一个悲伤的熊猫：

在对上面的 ( ) 示例进行了一番摆弄之后require.ensure()，我意识到 ES6export default语法导出了一个具有名为 的属性的对象default，其中包含我的代码（Button函数）。

我确实通过.default在 require 调用之后附加来修复损坏的代码示例，如下所示：

...但我认为它看起来有点笨拙并且容易出错（我必须知道哪个模块使用 ES6 语法，以及哪个使用 good old module.exports）。

这让我想到了我的问题：从使用 CommonJS 语法的代码中导入 ES6 代码的正确方法是什么？

使用带有 babel 的 webpack 模块捆绑器导入两个文件时，无法在 ES6 类中实现继承

我的目录结构看起来像

webpack.config.js 看起来像

Entry.js 看起来像

content.js 看起来像

content1.js 看起来像

使用 webpack 生成 bundle.js 并运行 index.html 后：出现类似错误

请帮助我弄清楚如何使用 webpack 模块捆绑器在 ES6 中实现继承。

当使用 ES6 模块加载语法时，像这样......

...是否可以使用一个函数来替换../../pages一个函数，这样我就可以拥有这样的东西......

对于我正在导入的所有页面，都会重复这一行，因此如果它在一个函数中，如果我的文件结构发生变化，我可以快速更新所有路径。

试了一下，好像不行。在 ES6 中是否有更聪明的方法来做到这一点？

谢谢 ：）

这是我在 React-Redux 中的 Hello World 应用程序。当我在命令提示符下运行时没有显示错误npm start，但是当我在 localhost:3333 上打开它时，它是一个空白页。我安装了react react-dom babel babel-core babel-preset-es2015 babel-preset-react babel-loader webpack webpcak-dev-server. 我的 cmd 显示它在 localhost:3333 上运行，并且 bundle 现在有效。请帮忙，因为这是我最后一次尝试 react-redux，请帮忙。

索引.html

应用程序.js

main.js

包.json

webpack.config.js

标题Setup显示在浏览器选项卡上，即html代码的标题成功显示在浏览器上

请帮忙！

如何在浏览器中集成 System.js 和 babel？

我想在开发模式下在浏览器中使用纯 es6 源代码，在生产模式下将文件捆绑在一起。所以我像下面这样配置 system.js 和 babel。

我通过 npm 安装了最新版本systemjs（0.19.24）和babel-standalone（6.6.5）。

我的 index.html 在下面

我的 boot.js 在下面

我的 app.js 在下面

当我访问该页面时，控制台出现错误。

system.src.js:57 Uncaught (in promise) Error: ReferenceError: [BABEL] http://v:3000/boot.jsplugins : Using removed Babel 5 option: base.modules - 在选项中使用相应的模块转换插件. 查看http://babeljs.io/docs/plugins/#modules (...)

然后我检查了 babel 文档，并在 babelOptions 中添加了一个选项，现在我的 System.js 配置如下

但是会发生同样的错误。我不知道如何在浏览器中集成 System.js 和 babel 来加载 es6 源代码模块。

有人可以帮我吗？非常感谢！！

编辑

我检查了 system.src.js，并options.modules = 'system';在 babelTranspile 函数中删除。然后上面的错误消失了。但出现了新的错误。

如果我没有包含plugins: ["transform-es2015-modules-systemjs"]在 babelOptions 中，js 文件会转换为下面

但我得到了错误

要求不是一个功能。

如果我包含plugins: ["transform-es2015-modules-systemjs"]在 babelOptions 中，那么文件不会被转换，并且会在 app.js 中抛出错误

system.src.js:57 Uncaught (in promise) 错误：SyntaxError: Unexpected token export

请帮我解决这个问题。等待回复。非常感谢

Gruntfile.js

这是一个用 ES6 编写的示例文件

在编译上述文件时，它减少到

现在我试图在我的主文件中导入 HomeController 但 HomeController 返回一个空对象。我不确定我在哪里犯了错误。

我正在尝试移植一些我编写的使用systemjs + Babel 的 ES6 代码。

移植大部分代码我没有任何问题。

但是，我有一些代码需要动态加载 ES6 模块，如下所示：

src 是一个外部 ES6 模块，它也可能具有依赖项（静态导入）。

我如何将此代码移植到 Webpack ？如果我尝试使用 require 语句，我会收到一个警告，根据 Webpack 文档，这似乎是正常的。

我想将我的 javascript 代码拆分为模块并import使用 webpack 解析 s 以将所有模块捆绑到一个文件中。

这很好用babel-loader，但是，我不想要任何转译，只需要简单的捆绑 - 我的模块包含纯 ES6 代码，并且只针对 ES6 兼容的浏览器。

我有哪些选择？

我想将服务器端呈现的配置作为 ES6 模块传递给可以导入的 TypeScript 应用程序。使用 SystemJS 模块加载器。

配置模块直接在 index.html 中设置：

然后在 main.ts

这在浏览器中有效，因为 SystemJS 识别配置模块但 TypeScript 编译器抱怨：

找不到模块“配置”。

如何告诉 TypeScript index.html 中定义的“外部”自定义模块？