前端怎么导入外部js

在前端开发中，导入外部JavaScript文件可以通过多种方式实现，包括在HTML文件中使用<script>标签、动态加载脚本，以及利用模块化工具。最常用的方法是通过HTML文件中的<script>标签导入外部JavaScript文件、动态创建并插入<script>标签、使用模块化工具如Webpack或Rollup。这些方法各有优劣，适用于不同的开发场景。

其中，通过HTML文件中的<script>标签导入外部JavaScript文件是最简单和常见的方法。你只需要在HTML文件的<head>或<body>标签中插入<script>标签，并使用src属性指定外部JavaScript文件的路径。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="path/to/your/javascriptfile.js"></script>
</head>
<body>
    <!-- Your HTML content goes here -->
</body>
</html>

这种方法直观、易于使用，适合大多数简单的前端项目。接下来，我们将详细探讨各种导入外部JavaScript文件的方法及其应用场景。

一、通过HTML文件中的`<script>`标签导入外部JavaScript文件

1.1 基础用法

在HTML文件中使用<script>标签导入外部JavaScript文件是最常见和最简单的方法。你只需在<head>或<body>标签中加入<script>标签，并使用src属性指定外部JavaScript文件的路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="path/to/your/javascriptfile.js"></script>
</head>
<body>
    <!-- Your HTML content goes here -->
</body>
</html>

1.2 `defer` 和 `async` 属性

在导入外部JavaScript文件时，可以使用defer和async属性来控制脚本的加载和执行时机。

defer：脚本会在HTML解析完毕后执行，按顺序执行。如果有多个defer脚本，它们会按顺序执行。
```
<script src="path/to/your/javascriptfile.js" defer></script>
```
async：脚本会异步加载，一旦加载完成立即执行，加载顺序无法保证。如果多个async脚本，它们可能会以任何顺序执行。
```
<script src="path/to/your/javascriptfile.js" async></script>
```

二、动态加载外部JavaScript文件

2.1 使用JavaScript动态创建`<script>`标签

在某些动态场景下，你可能需要在运行时加载外部JavaScript文件。可以使用JavaScript动态创建并插入<script>标签。

function loadScript(url) {
    var script = document.createElement('script');
    script.src = url;
    script.type = 'text/javascript';
    document.head.appendChild(script);
}
// 使用该函数加载外部脚本
loadScript('path/to/your/javascriptfile.js');

这种方法灵活且适用于需要根据条件加载不同脚本的场景。

2.2 使用模块化工具加载脚本

现代前端开发中，模块化工具如Webpack、Rollup和Parcel广泛应用于管理和打包JavaScript模块。这些工具可以自动处理模块依赖关系，并生成优化后的打包文件。

2.2.1 Webpack

Webpack是一个流行的模块打包工具，支持JavaScript模块化开发。使用Webpack可以轻松导入外部JavaScript文件。

安装Webpack及其依赖：

npm install --save-dev webpack webpack-cli

创建webpack.config.js配置文件：

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development'
};

在index.js中导入外部JavaScript文件：

import './path/to/your/javascriptfile.js';

运行Webpack打包：

npx webpack

2.2.2 Rollup

Rollup是另一个流行的模块打包工具，尤其适用于库的打包。使用Rollup可以导入外部JavaScript文件，并生成优化后的代码。

安装Rollup及其依赖：

npm install --save-dev rollup

创建rollup.config.js配置文件：

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife'
    }
};

在index.js中导入外部JavaScript文件：

import './path/to/your/javascriptfile.js';

运行Rollup打包：

npx rollup -c

三、使用CDN导入外部JavaScript文件

3.1 什么是CDN

内容分发网络（CDN）是一种通过地理上分布的服务器网络来加速内容交付的技术。在前端开发中，CDN常用于托管和交付常用的JavaScript库，如jQuery、React和Vue.js。

3.2 使用CDN导入外部JavaScript文件

通过CDN导入外部JavaScript文件非常简单。你只需要在HTML文件中插入指向CDN的<script>标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <!-- Your HTML content goes here -->
</body>
</html>

这种方法非常适用于引入广泛使用的第三方库，能够提高加载速度和减少服务器负载。

四、通过npm导入外部JavaScript文件

4.1 安装npm包

npm（Node Package Manager）是Node.js的包管理工具，可以用来安装和管理JavaScript库。在前端开发中，使用npm可以方便地导入和管理外部JavaScript文件。

安装所需的npm包：

npm install lodash

4.2 在JavaScript文件中导入npm包

在安装npm包后，可以在JavaScript文件中使用import或require语句导入包。

import _ from 'lodash';
// 使用lodash库的函数
const array = [1, 2, 3];
const shuffledArray = _.shuffle(array);
console.log(shuffledArray);

4.3 与模块化工具结合使用

通常，npm与模块化工具（如Webpack或Rollup）结合使用，以便于打包和优化代码。

4.3.1 Webpack结合npm包

在使用Webpack时，可以直接在JavaScript文件中导入npm包，然后通过Webpack进行打包。

// src/index.js
import _ from 'lodash';
const array = [1, 2, 3];
const shuffledArray = _.shuffle(array);
console.log(shuffledArray);

在webpack.config.js中进行配置：

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development'
};

运行Webpack进行打包：

npx webpack

4.3.2 Rollup结合npm包

同样地，Rollup也可以与npm包结合使用。在JavaScript文件中导入npm包：

// src/index.js
import _ from 'lodash';
const array = [1, 2, 3];
const shuffledArray = _.shuffle(array);
console.log(shuffledArray);

在rollup.config.js中配置：

import resolve from '@rollup/plugin-node-resolve';
export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife'
    },
    plugins: [resolve()]
};

运行Rollup进行打包：

npx rollup -c

五、ES6模块化导入

5.1 什么是ES6模块化

ES6引入了模块化语法，使得JavaScript代码可以更好地组织和管理。使用import和export语句，可以在不同的JavaScript文件之间导入和导出模块。

5.2 导入和导出模块

在ES6模块化语法中，可以使用export语句导出模块，使用import语句导入模块。

// module.js
export const greeting = 'Hello, world!';
export function greet(name) {
    return `${greeting} My name is ${name}.`;
}

在另一个文件中导入模块：

// main.js
import { greeting, greet } from './module.js';
console.log(greeting); // 输出: Hello, world!
console.log(greet('Alice')); // 输出: Hello, world! My name is Alice.

5.3 使用ES6模块化的注意事项

ES6模块化有一些注意事项：

模块文件必须使用.js或.mjs扩展名。
浏览器需要支持ES6模块化语法，或者使用打包工具进行转换。
需要在HTML文件中使用type="module"属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="main.js"></script>
</head>
<body>
    <!-- Your HTML content goes here -->
</body>
</html>

六、总结

导入外部JavaScript文件是前端开发中的基础操作，主要方法包括通过HTML文件中的<script>标签导入、动态加载脚本、使用模块化工具（如Webpack和Rollup）、使用CDN、以及使用npm和ES6模块化。每种方法都有其独特的优势和适用场景，应根据具体项目需求选择合适的方法。

通过HTML文件中的<script>标签导入：简单直接，适合小型项目。
动态加载外部JavaScript文件：适用于需要根据条件加载脚本的场景。
使用模块化工具加载脚本：适合大型项目，便于管理依赖和优化代码。
使用CDN导入外部JavaScript文件：适用于引入常用的第三方库，提升加载速度。
通过npm导入外部JavaScript文件：便于管理和更新依赖，常与模块化工具结合使用。
ES6模块化导入：现代JavaScript开发的标准，便于代码组织和模块复用。

通过了解和掌握这些方法，可以更高效地导入和管理外部JavaScript文件，提高开发效率和代码质量。在实际项目中，根据需求选择合适的方法，充分利用现代前端开发工具和技术，提升项目的可维护性和性能。