为什么 babel-loader 是 webpack 的一部分而不是 babel 本身?
why babel-loader is part of webpack instead babel itself?
我正在了解构建系统在 JavaScript 中的工作原理。如果 babel-loader
是将 React
翻译成 JavaScript
的转译器,为什么它是 webpack
插件的一部分?
transpiling
和bundling
不是一个单独的进程吗?
是否有资源详细说明所有这些框架如何组合在一起并使构建系统工作?我似乎只能在官方文档中找到高级概述。
- Webpack 是一个 "module bundler"。它本身不会改变程序的源代码(注意:对此有一些注意事项,例如缩小),只是将大型代码库的所有不同部分连接在一起,以便通过 Internet 更轻松、更高效地交付(取决于用例;您可能正在捆绑服务器端代码,在这种情况下,好处主要在于能够整合构建工具)。
- webpack 加载器用于在打包过程中处理文件。它特定于 webpack(你不会在没有 webpack 的情况下使用
babel-loader
,除非可能与其他构建工具互操作,但即使那样它也不会单独使用)。
- 在 webpack 配置中,指定文件扩展名到 webpack 加载程序的映射。例如,一个常见的情况是使用
ts-loader
处理 .ts
个文件。这样,webpack 会将带有 .ts
扩展名的文件传递给 TypeScript 编译器,并在 bundle 中使用此编译的输出,而不是源程序。
- Babel 是一个编译器;它采用 ESNext 程序并生成等效的 ES3+ 兼容程序。
babel-loader
做 ts-loader
对 TypeScript 做的事情;将文件传递给 Babel 编译器,returns 将结果用于原始源程序的包中。
Isn't transpiling and bundling is a separate process?
是的。这就是为什么我们有 "webpack the bundler"、"Babel the compiler/transpiler" 和 babel-loader
将两者连接在一起的原因。没有 babel-loader
webpack 将无法通过 Babel 处理文件。
希望对您有所帮助。
我正在了解构建系统在 JavaScript 中的工作原理。如果 babel-loader
是将 React
翻译成 JavaScript
的转译器,为什么它是 webpack
插件的一部分?
transpiling
和bundling
不是一个单独的进程吗?
是否有资源详细说明所有这些框架如何组合在一起并使构建系统工作?我似乎只能在官方文档中找到高级概述。
- Webpack 是一个 "module bundler"。它本身不会改变程序的源代码(注意:对此有一些注意事项,例如缩小),只是将大型代码库的所有不同部分连接在一起,以便通过 Internet 更轻松、更高效地交付(取决于用例;您可能正在捆绑服务器端代码,在这种情况下,好处主要在于能够整合构建工具)。
- webpack 加载器用于在打包过程中处理文件。它特定于 webpack(你不会在没有 webpack 的情况下使用
babel-loader
,除非可能与其他构建工具互操作,但即使那样它也不会单独使用)。 - 在 webpack 配置中,指定文件扩展名到 webpack 加载程序的映射。例如,一个常见的情况是使用
ts-loader
处理.ts
个文件。这样,webpack 会将带有.ts
扩展名的文件传递给 TypeScript 编译器,并在 bundle 中使用此编译的输出,而不是源程序。 - Babel 是一个编译器;它采用 ESNext 程序并生成等效的 ES3+ 兼容程序。
babel-loader
做ts-loader
对 TypeScript 做的事情;将文件传递给 Babel 编译器,returns 将结果用于原始源程序的包中。
Isn't transpiling and bundling is a separate process?
是的。这就是为什么我们有 "webpack the bundler"、"Babel the compiler/transpiler" 和 babel-loader
将两者连接在一起的原因。没有 babel-loader
webpack 将无法通过 Babel 处理文件。
希望对您有所帮助。