如何在没有捆绑器的情况下使用 Babel，但具有类似于 webpack 的开发体验？

Question

我正在尝试使用 ES6 modules without bundling. I still want to use babel-7 to translate TypeScript and JSX to JS. I find it hard to figure out how to set up a development-server for it. I couldn't find any kind of "babel-dev-server" that works similar to webpack-dev-server（热模块重新加载、浏览器同步、文件观察器）构建一个新项目。

一种可能性是使用 browser sync 作为静态服务器，例如dist 和运行类似 babel src --out-dir dist --watch 的并行。但这不包括热重载，对我来说似乎有点笨拙。此外，如果您可以为 JS 文件提供哈希以更好地控制缓存，那么它对于构建和开发步骤仍然有用。或者我可以配置像 webpack 这样的构建工具，使其不执行捆绑但仍然执行一些转换（比如将哈希值放在导入文件名中）？

Answer 1

有了 webpack 和 source maps，改变你的代码应该无关紧要。虽然这在最初设置时可能是一个挑战，但一旦您开始使用它，您就可以在浏览器调试工具中查看您的原始源代码，就像它们在磁盘上显示给您的一样。 VS Code 编辑器也很好地支持此功能，允许您直接在编辑器中设置断点和查看变量值，而无需使用浏览器开发人员工具。

但是，如果您仍然试图让它与您的原始源文件一起使用，那么您的 ES6 代码应该可以在大多数现代浏览器中运行是对的

对于实时重新加载，您可以查看 npm livereload package。

或者你可以自己动手弄清楚 webpack-dev-server 是如何做到的。他们使用 chokidar npm 包来观察文件系统的变化，然后通过网络套接字通知浏览器。您或许可以通过一些努力将类似的东西组合在一起。

方法如下 webpack-dev-server initiates it:

const watcher = chokidar.watch(watchPath, options);

watcher.on('change', () => {
  this.sockWrite(this.sockets, 'content-changed');
});

显然有一些 JavaScript 在浏览器中运行，等待该消息的 websocket。

Answer 2

您可以使用像 Emit All 这样的 Webpack 插件。

Answer 3

原型制作方式

一个非常简单的方法是将服务器和转译视为单独的步骤

您可以使用独立版本的 babel 作为您加载的第一个脚本，这样您就可以在 html 文件的 javascript 文档中编写 jsx 而无需编译它们。

只需添加来自 https://cdnjs.com/libraries/babel-standalone/ 的 cdn 链接作为脚本，如下所示：

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
    <script src="/your/jsx/here.js"></script>
    <script>
      // or here
    </script>
  </head>
  <body>
    <div id="application" />
    <noscript>This app needs javascript enabled in order to run.</noscript>
  </body>
</html>

这将允许您使用任何监视文件的网络服务器真正快速地制作原型。您可以使用任何任务运行ner 插件（即 g运行t 或 gulp）或者如果您正在使用 visual studio 看看 LiveServer插件。

当您转向生产级时，您可能不想包含整个 babel 库。请参阅其他两种方法。

Webpack方式

你问的是如何在不打包的情况下使用 webpack。这可以使用 file loader plugin to load every file separately, using a glob pattern. Do make sure whether this is indeed what you need. If all you want is to simply debug your code an relate it back to the original file after compiling, all you need is a standard webpack configuration using bundling and sourcemaps.

来完成

任务运行方式

一种方法可以更好地控制每个文件的处理方式，您可以使用任务运行ner 为您执行编译步骤。下面是 task运行ner https://gulpjs.com/.

的简化示例配置

gulpfile.js

const gulp = require('gulp');
const watch = require('gulp-watch');
const webpackStream = require('webpack-stream');
const webpack = require('webpack');
const eslint = require('gulp-eslint');

gulp.task('watch', function() {
  return watch('src/**.js', ['compile']);
});

gulp.task('lint', function() {
  return gulp.src(['src/*.js', 'src/*/*.js'])
    .pipe(eslint({
      parser: 'babel-eslint',
      parserOptions: {
        ecmaFeatures: {
          jsx: true
        },
        sourceType: 'module'
      }
    }))
    .pipe(eslint.format())
    .pipe(eslint.failAfterError());
});

gulp.task('compile', ['lint'], function() {
  return gulp.src('src/main.js')
    .pipe(webpackStream({
      output: {
        filename: 'main.js',
        libraryTarget: 'commonjs2',
        sourceMapFilename: 'main.js.map',
      },
      plugins: [],
      module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
              presets: [
                require.resolve('babel-preset-es2015'),
                require.resolve('babel-preset-stage-0'),
              ],
            },
          },
        ],
      },
    }), webpack)
    .pipe(gulp.dest('dist/'));
});

此示例文件可以是运行，使用 gulp watch。它将有机会查看文件，并在它确实触发其他任务时。

我只有一个 webpack 的例子，但你可以用任何其他编译器组件替换它，如果你想要的话，甚至可以编写你自己的编译步骤 （可能你不需要） .

这样您就可以精确控制文件的每一步。其中大部分（以及更多）也可以使用 Webpack 方式 来实现。但是，当将每个文件作为单独的包处理时，它的缺点是将所有样板文件插入每个已处理文件的顶部。最终可能可以用 common chunks plugin.

来完成一些事情

Answer 4

随着 Snowpack（以前的@pika/web）的最新版本，现在应该可以实现了！

来自他们的网站：

TL;DR - With Snowpack you can build modern web apps (using React, Vue, etc.) without a bundler (like Webpack, Parcel, Rollup). No more waiting for your bundler to rebuild your site every time you hit save. Instead, every change is reflected in the browser instantly.

还有他们的"How it Works"：

不是在每次更改时都捆绑，而是在 npm 安装后立即运行 Snowpack。
Snowpack 将您的依赖项作为单个 JS 文件重新安装到新的 web_modules/ 目录。它永远不会触及您的源代码。
编写代码，通过 ESM 导入导入这些依赖项，然后运行所有这些都在浏览器中。
跳过捆绑步骤，点击保存后您的更改会立即反映在浏览器中。
继续使用您最喜欢的网络框架和构建工具！支持 Babel 和 TypeScript。

查看 https://www.snowpack.dev/ 了解更多信息，他们的文档做得很好，看起来很有前途！

如何在没有捆绑器的情况下使用 Babel，但具有类似于 webpack 的开发体验？

How can Babel be used without bundler, but with a dev-experience similar to webpack?

javascript

webpack

babeljs

es6-modules

hot-reload