h5前端怎么导入js

H5前端导入JS的方式有：通过<script>标签、使用模块化工具、动态加载、引入外部库。

在开发H5前端应用时，JavaScript（JS）是不可或缺的。JS可以通过多种方式导入到HTML文件中，每种方式都有其特定的应用场景和优势。通过<script>标签是最常见的方式，可以直接在HTML文件中编写或引入外部JS文件。下面将详细介绍这种方式，并探讨其他几种常用的导入JS的方式。

一、通过`<script>`标签导入

1. 内联脚本

内联脚本是将JS代码直接写在HTML文件中的<script>标签内，这种方式适用于较小的脚本或简单的功能测试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        console.log('Hello, World!');
    </script>
</body>
</html>

2. 外部脚本

外部脚本是将JS代码写在独立的JS文件中，然后在HTML文件中通过<script>标签引入。这种方式有助于保持HTML文件的简洁，便于维护和管理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="main.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在上述代码中，main.js文件包含了JS代码：

console.log('Hello, World!');

二、使用模块化工具

现代前端开发中，模块化工具如Webpack、Rollup和Parcel等提供了更为强大的JS导入和管理功能。这些工具可以将多个JS文件和其他资源打包成一个或多个文件，以提高应用性能和开发效率。

1. Webpack

Webpack是一个流行的模块打包工具，支持ES6模块、CommonJS模块等。使用Webpack时，需先安装并配置：

npm install webpack webpack-cli --save-dev

创建一个webpack.config.js文件：

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

然后，将index.js文件作为入口文件：

// src/index.js
import { hello } from './hello.js';
hello();

// src/hello.js
export function hello() {
    console.log('Hello, World!');
}

运行Webpack打包命令：

npx webpack

生成的bundle.js文件将被引入HTML文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="dist/bundle.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

2. Rollup

Rollup是另一个流行的模块打包工具，特别适用于库的打包。使用Rollup时，需先安装：

npm install rollup --save-dev

创建一个rollup.config.js文件：

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

然后，将JS模块文件导入：

// src/index.js
import { hello } from './hello.js';
hello();

// src/hello.js
export function hello() {
    console.log('Hello, World!');
}

运行Rollup打包命令：

npx rollup -c

生成的bundle.js文件将被引入HTML文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="dist/bundle.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

三、动态加载

动态加载是指在运行时根据需要加载JS文件。这种方式适用于需要按需加载资源的场景，以减少初始加载时间和提高性能。

1. 使用原生JS动态加载

可以通过创建<script>标签并将其添加到DOM中来动态加载JS文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function loadScript(url, callback) {
            let script = document.createElement('script');
            script.src = url;
            script.onload = callback;
            document.head.appendChild(script);
        }
        loadScript('main.js', function() {
            console.log('Script loaded and executed.');
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

2. 使用动态模块加载工具

现代前端框架如React、Vue和Angular等，通常提供了动态模块加载的支持。例如，React中的React.lazy和Suspense组件可以实现按需加载：

import React, { Suspense, lazy } from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));
function MyComponent() {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <OtherComponent />
        </Suspense>
    );
}
export default MyComponent;

四、引入外部库

很多外部JS库和框架如jQuery、Lodash、React、Vue等，可以通过CDN或包管理工具如npm、yarn等引入。

1. 通过CDN引入

通过CDN引入外部库的方式非常简单，只需在HTML文件中添加<script>标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        $(document).ready(function() {
            console.log('jQuery is ready!');
        });
    </script>
</body>
</html>

2. 通过包管理工具引入

通过包管理工具如npm或yarn引入外部库时，需先安装库：

npm install lodash

然后，在JS文件中导入并使用：

import _ from 'lodash';
console.log(_.join(['Hello', 'World'], ' '));

在使用模块化工具（如Webpack）时，需将打包后的文件引入HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="dist/bundle.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

五、总结

通过本文的详细介绍，我们了解了通过<script>标签、使用模块化工具、动态加载、引入外部库等多种导入JS的方式。通过<script>标签是最基本和常见的方式，适用于简单项目；使用模块化工具则适用于较大型项目，提供了更强的依赖管理和打包优化能力；动态加载有助于提高应用性能，适用于需要按需加载资源的场景；引入外部库则简化了第三方库的使用。

在实际项目中，选择合适的导入方式可以提高开发效率、优化应用性能，并便于后期维护。无论是单独使用某一种方式，还是结合多种方式，理解每种方式的特点和适用场景都是至关重要的。通过不断实践和总结经验，前端开发者可以更好地应对各种复杂的开发需求。