在webpack中使用ES6的import/export
随着ES6成为JavaScript的标准，在前端开发中，更多的开发者使用了ES6中的import/export语法。然而，当使用webpack打包代码时，我们需要注意某些问题。
为什么要使用import/export语法？
在ES6之前，我们使用<script>标签加载JavaScript文件。这样做不仅浪费带宽，还会暴露全局变量。使用import/export语法可以让我们更好地控制代码的作用域，以及更好地管理我们的代码结构。
如何在webpack中使用import/export语法？
Webpack是一个模块打包工具，它可以处理JavaScript、CSS、图片等资源。我们需要使用webpack打包我们的代码，以此使用ES6的import/export语法。
首先，我们需要在webpack的配置文件中，配置babel-loader，以便它可以解析ES6代码：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- --- ----
------- -
------ -
-
----- ----------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--我们还需要安装@babel/preset-env，以支持ES6语法。安装方法如下：
npm install --save-dev @babel/core @babel/preset-env babel-loader
接下来，我们可以使用ES6的import/export语法了：
// app.js
import { add } from './math.js';
console.log(add(1, 2));// math.js
export function add(a, b) {
return a + b;
}在代码中，我们使用了import语法从./math.js导入了一个名为add的函数，并使用了export语法导出了该函数。
注意，如果你使用了babel-loader，你的代码将被转换为ES5代码。这可能会影响性能，因此请谨慎使用。
在使用import和export语法时，我们还需要注意以下几点：
- 文件路径
当导入/导出模块时，请确保文件路径是准确的。这通常意味着使用相对路径。
- 导出类型
请注意，在ES6中，有两种导出类型：命名导出和默认导出。你可以导出任何内容，但请确保你在导入时使用正确的语法。
-- -------------------- ---- ------- -- ------- ------ -------- ------ -- - ------ - - -- - ------ ----- -- - ------------------ ------ ------- ---------- - ------------------- --------- -
在注释中，我们导出了一个名为add的函数，一个名为pi的常量，以及一个默认导出的匿名函数。我们更新app.js以支持所有这些不同的导出类型。
-- -------------------- ---- ------- -- ------ ------ - ---- -- - ---- ------------ ------ ------ ---- ------------ ------------------ ---- ---------------- ---------
我们使用{ add, pi }语法将命名导出导入到app.js中，并使用import Logger语法导入了默认导出。
结论
通过使用webpack和Babel，可以方便地使用ES6的import/export语法。注意文件路径和导出类型，并使用正确的语法导入/导出模块。这样可以使代码更加易于维护，并发挥最佳性能。
示例代码
文件目录如下：
-- -------------------- ---- ------- - --- ---- - --- --------- --- ------------ - --- --- - --- --- --- --- - --- ------ - --- ------- --- -----------------
webpack.config.js文件内容：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ ---------------
----- --------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- ----------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--math.js文件内容：
-- -------------------- ---- ------- ------ -------- ------ -- - ------ - - -- - ------ ----- -- - ------------------ ------ ------- ---------- - ------------------- --------- -
app.js文件内容：
import { add, pi } from './math.js';
import Logger from './math.js';
console.log(add(1, 2));
console.log(pi);
Logger();安装所需的包：
npm i webpack webpack-cli babel-loader @babel/core @babel/preset-env -D
运行webpack：
npx webpack --config webpack.config.js --mode development
打开index.html，在控制台中看到以下结果：
3 3.141592653589793 Hello, world!
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670e08bc5f551281025f708a