如何连接 ES6 模块? [英] How do I concatenate ES6 modules?

问题描述

如何连接 ES6 模块?

How can I concatenate ES6 modules?

var foo = 2; // This would normally be scoped to the module.
export function Bar() {}

// ...concatenate...

import { Bar } from 'javascripts/bar' //This file no longer exists in the concatenated scenario.
export function Bam() {}

推荐答案

2020-09-02 更新: 世界语已被 Rollup 前段时间，是解决这个问题的绝佳选择.根据您的需求，Webpack 也可能是不错的选择.

Update 2020-09-02: Esperanto was replaced by Rollup some time ago, and is a great choice for this problem. Depending on your needs, Webpack may also be a good choice.

如果你想做的是创建一个内部不使用 ES6 模块的单个 JavaScript 文件，以便你今天可以在浏览器/节点中使用它，那么我建议使用 世界语(完全公开，我是该项目的维护者).它允许您创建一个包，将所有文件连接在一起，而无需像使用 browserify 或 webpack 那样使用加载器.这通常会产生更小的代码(无加载器)、更好地消除死代码(使用 Google Closure Compiler 或 UglifyJS 等压缩器时)以及更好的性能，因为 JS 解释器能够更好地优化结果.

If what you want to do is create a single JavaScript file that does not internally use ES6 modules, so that you can use it with browsers/node today, then I recommend using Esperanto (full disclosure, I'm a maintainer of the project). It allows you to create a bundle that concatenates all of the files together without the use of a loader like you'd get using something like browserify or webpack. This typically results in smaller code (no loader), better dead code elimination (when using a minifier like Google Closure Compiler or UglifyJS), and better performance as the JS interpreter is better able to optimize the result.

这是一个示例用法，但请注意，有很多工具可以将世界语集成到您的工作流程中:

Here's an example usage, but note that there are plenty of tools to integrate Esperanto into your workflow:

var fs = require( 'fs' );
var esperanto = require( 'esperanto' );

esperanto.bundle({
  base: 'src', // optional, defaults to current dir
  entry: 'mean.js' // the '.js' is optional
}).then( function ( bundle ) {
  var cjs = bundle.toCjs();
  fs.writeFile( 'dist/mean.js', cjs.code );
});

这个例子取自 关于捆绑 ES6 模块的维基页面.

这篇关于如何连接 ES6 模块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！