Question

ES6模块允许我们创建可以作为依赖项导出和导入的代码模块。

Browserify和Webpack做同样的事情。所以我正确地假设如果我使用ES6和像babel这样的东西来转换我的代码，那么不需要webpack和browserify吗？

Answer 1

如果您在浏览器中使用它，则目前仍需要webpack或browserify。

我们来看一个例子：

以下

import * as name from 'name.js';

变成了：

'use strict';

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }

var _nameJs = require('name.js'); // Here, a function named "require" is still needed

var name = _interopRequireWildcard(_nameJs);

Check it out in the Babel Repl

如您所见，babel依赖于CommonJS方法require（实际上是它的任何实现）来进行导入。由于node.js实现了CommonJS，它可以工作，但目前没有浏览器实现它。 AFAIK也没有any browsers that support ES 6 Modules natively。

Answer 2

详细阐述here - ES6模块有两个方面：

ES6模块标准包含两部分：


声明性语法（用于导入和导出）

程序化加载器   API：配置模块的加载方式和有条件加载方式   模块

Babel只处理第一个方面 - 即。用于导入和导出的声明性语法，并且不提供自己的加载器。

目前使用ES6模块的人通常采用以下方法之一：

使用Babel将ES6模块语法转换为现有的模块实现，如CommonJS / AMD，并且可以使用Webpack / browserify / requirejs等可用工具来加载/捆绑js资产。
或者像SystemJS这样的加载器为Programmatic loader API提供支持（通过ES6 module loader polyfill。使用此工具可以让你摆脱Browserify / Webpack但是，截至目前，你只是交换另一种工具可能是因为越来越多的像Aurelia这样的库包含ES6模块，并推荐标准化的System.import语法 - SystemJS将会大受欢迎。

另一个方面是与现有模块生态系统的兼容性（特别是在npm上）。值得注意的是，您不会失去与现有生态系统兼容的任何策略：webpack和SystemJS都允许加载和捆绑commonjs以及AMD模块。

就资产捆绑而言，HTTP 2中的持久连接支持已经显着降低了javascript文件串联的价值。虽然在完整的javascript包的uglification之后消除死代码仍然是一个有价值的优化。

正如Rollup等工具的作者多次指出的那样，ES6模块的静态可分析特性使树木抖动和死代码消除更加有效。

Answer 3

此刻，我想说三点。如果我错了，请纠正我...

如果要为用户提供最佳性能，则es6modules更好。在某些情况下，它们的性能确实更好（更少的http请求，更好的缓存），并且在AFAIK中没有任何情况，它们的性能更差。
pd.DataFrame与目前最常用的软件包管理器— import urllib.request,sys,time from bs4 import BeautifulSoup import requests import pandas as pd pagesToGet = 1 for page in range(1,pagesToGet+1): print('processing page :', page) url = 'http://norumors.net/?post_type=rumors/?page=' + str(page) print(url) #an exception might be thrown, so the code should be in a try-except block try: #use the browser to get the url. This is suspicious command that might blow up. page = requests.get(url) # this might throw an exception if something goes wrong. except Exception as e: # this describes what to do if an exception is thrown error_type, error_obj, error_info = sys.exc_info() # get the exception information print('ERROR FOR LINK:',url) #print the link that cause the problem print(error_type, 'Line:', error_info.tb_lineno) #print error info and line that threw the exception continue #ignore this page. Abandon this and go back. soup = BeautifulSoup(page.text,'html.parser') texts = [] links = [] filename = "NEWS.csv" f = open(filename,"w", encoding = 'utf-8') Statement = soup.find("div",attrs={'class':'row d-flex'}) divs = Statement.find_all("div",attrs={'class':'col-lg-4 col-md-4 col-sm-6 col-xs-6'}) for div in divs: txt = div.find("img",attrs={'class':'rumor__thumb'}) texts.append(txt['alt']) lnk = div.find("a",attrs={'class':'rumor--archive'}) links.append(lnk['href']) data = pd.DataFrame(list(zip(texts, links)), columns=['Statement', 'Link']) data.to_csv(f, encoding='utf-8', index=False) f.close()更好地集成。

使用es6modules时，您确实必须在browserify中指定模块的相对路径，而不仅仅是npm中的模块名称。您可以编写一个预处理器来解决es6modules的此问题，并在构建过程中执行它（如果它不是相对路径，它将更改路径）。但这当然是额外的工作，并且browserify提供了开箱即用的功能。

此外，npm注册表中的大多数模块可能使用commonjs语法而不是es6modules语法。这意味着，如果您想直接从npm中使用模块，则必须对其进行分叉，以利用es6modules的优势。

注意：AFAIK将es6modules语法转换为其他内容（如使用babel）并不能保留es6modules语法的优点。

使用es6modules时，可能还会有某种构建过程（如第二点所述，或者您也想缩小或做其他事情）。借助node_modules，可以使用相当不错的工具，使开发变得非常方便，以便您可以有效地工作，例如browserify，由于缓存，确实增加了构建所需的时间。 / li>

es6模块是否否定了对browserify / webpack的需求？

3 个答案: