怎么export js

如何导出 JavaScript

导出JavaScript代码可以通过多种方式完成，包括使用模块系统、Webpack打包工具、Node.js的require方法等。其中，最为常见且推荐的方式是通过ES6模块系统，该系统提供了export和import语法。使用ES6模块系统有助于代码的模块化、重用性和可维护性。下面将详细介绍如何使用ES6模块系统来导出JavaScript代码。

一、使用ES6模块系统

1.1、导出单个功能

在ES6中，可以使用export关键字来导出一个函数、变量或类。下面是一个简单的示例：

// math.js
export function add(a, b) {
    return a + b;
}

在这个示例中，我们定义了一个名为add的函数，并使用export关键字将其导出。这个函数可以在其他JavaScript文件中被导入和使用。

1.2、导出多个功能

有时候，你可能需要导出多个函数或变量。在这种情况下，可以使用多个export语句，或者使用一个export语句导出一个对象：

// math.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

或者：

// math.js
function add(a, b) {
    return a + b;
}
function subtract(a, b) {
    return a - b;
}
export { add, subtract };

1.3、导出默认功能

ES6模块系统还支持默认导出，这对于导出一个模块的主要功能非常有用。使用export default语法可以导出一个默认的功能：

// math.js
export default function multiply(a, b) {
    return a * b;
}

默认导出的功能在导入时可以使用任何名字：

// main.js
import multiply from './math';
console.log(multiply(2, 3)); // 输出 6

二、使用CommonJS模块系统

CommonJS模块系统广泛应用于Node.js环境中。它使用module.exports和require语法来导出和导入模块。

2.1、导出单个功能

// math.js
module.exports = function add(a, b) {
    return a + b;
};

2.2、导出多个功能

// math.js
function add(a, b) {
    return a + b;
}
function subtract(a, b) {
    return a - b;
}
module.exports = { add, subtract };

2.3、导入模块

// main.js
const math = require('./math');
console.log(math.add(2, 3)); // 输出 5
console.log(math.subtract(5, 3)); // 输出 2

三、使用Webpack打包工具

Webpack是一种流行的JavaScript模块打包工具，可以将多个模块和依赖项打包成一个文件。它支持ES6模块系统和CommonJS模块系统。使用Webpack可以简化模块的导入和导出过程，并提高代码的加载速度和性能。

3.1、安装Webpack

首先，确保你已经安装了Node.js和npm。然后，使用以下命令全局安装Webpack：

npm install -g webpack webpack-cli

3.2、配置Webpack

创建一个名为webpack.config.js的配置文件，并添加以下内容：

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

3.3、使用Webpack打包

在src目录中创建一个名为index.js的文件，并添加以下内容：

import { add, subtract } from './math';
console.log(add(2, 3)); // 输出 5
console.log(subtract(5, 3)); // 输出 2

在src目录中创建一个名为math.js的文件，并添加以下内容：

export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

然后，运行以下命令打包代码：

webpack

Webpack将生成一个名为bundle.js的文件，该文件包含所有导入的模块和依赖项。

四、使用Babel转换ES6模块

Babel是一个JavaScript编译器，可以将ES6代码转换为ES5代码，使其在旧版本的浏览器中运行。使用Babel可以确保你的代码兼容性更好。

4.1、安装Babel

首先，使用以下命令安装Babel及其相关依赖项：

npm install --save-dev @babel/core @babel/preset-env babel-loader

4.2、配置Babel

在项目根目录中创建一个名为.babelrc的配置文件，并添加以下内容：

{
    "presets": ["@babel/preset-env"]
}

4.3、使用Babel转换代码

确保你的Webpack配置文件中已经包含了Babel的配置，然后运行以下命令转换代码：