在浏览器中调试 ES6 模块

Question

我有一个大型 angular 1.6 应用程序。它的大部分是用 ES5 语法编写的，一些小部分是 ES6 的。我说的是某种 ES6，因为我们实际上并没有使用 modules/import/export。这样做的原因是虽然我们在部署时确实使用 gulp 来捆绑所有源代码，但我们不想在开发上这样做，因为它涉及运行 gulp 每个小的代码更改，并且运行这需要时间，而且根据 class 结构调试原始文件比捆绑代码更好（即使没有丑化）。

有没有办法在不捆绑的情况下用 ES6 语法调试 angular 1.6？ Babel 能否以某种方式帮助我保留原始文件结构，仅用于开发目的？

Answer 1

Babel 基本上是一个转译器，所以它的工作只是确保输出 es5 代码。它不会帮助您组织文件夹结构。

将它与 webpack 捆绑在一起可以帮助您保持一个合理的文件夹结构。你可以有一个配置对象来指定你的入口点，（称为"entry"），输出文件，加载器，内联：true，所以它会自动为你刷新浏览器以进行任何小的更改。 webpack 还附带了一个开发服务器。

以下是我在 webpack.config.js 中使用的内容。它帮助我为我的 es6 恶作剧维护一个本地沙箱。

module.exports = {
  entry : ['./app/index.js'], //entrypoint
  output: {
    path: 'D:\js\es6\build',
    filename: 'bundle.js'
  },
  module: {
      loaders: [ //specify objects for each loader
        {
          loader: 'babel-loader' ,
          test: /\.js$/,
          exclude:  /node_modules/, //we dont want to transpile the .js on node_modules
        }
      ]
  },
  devServer: {
      port: 3000,
      contentBase: './build',
      inline: true, //allows us to run automatic live code update
  }
}

在浏览器中调试 ES6 模块

Debugging ES6 mdules in browser

angularjs

babeljs

es6-modules