项目中如何引入js

项目中引入JS的最佳方法包括：直接在HTML文件中引入、通过模块化引入、使用构建工具、利用CDN。其中，使用模块化引入是现代前端开发中最常见且推荐的做法，因为它能够有效地管理代码依赖、提升代码可维护性和复用性。模块化引入能够将项目中的JavaScript代码拆分成多个独立的模块，每个模块负责不同的功能，这样可以更容易地对代码进行调试和测试。

一、直接在HTML文件中引入

1.1、内联脚本

内联脚本是最简单的引入方式，将JavaScript代码直接写在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>

1.2、外部脚本

将JavaScript代码写在独立的 .js 文件中，然后通过 <script> 标签引入。这种方法能够将HTML和JavaScript代码分离，提高可维护性。

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

// main.js
console.log('Hello World!');

二、通过模块化引入

2.1、使用ES6模块

ES6模块（也称为ESM）是现代JavaScript的模块化标准，它使用 import 和 export 关键字来导入和导出模块。这种方法能够更清晰地管理依赖关系，提升代码可维护性。

// module.js
export function sayHello() {
    console.log('Hello World!');
}
// main.js
import { sayHello } from './module.js';
sayHello();

在HTML文件中需要将 <script> 标签的 type 属性设置为 module。

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

2.2、使用CommonJS模块

CommonJS是Node.js的模块化标准，适用于后端开发和一些构建工具。它使用 require 和 module.exports 关键字。

// module.js
function sayHello() {
    console.log('Hello World!');
}
module.exports = sayHello;
// main.js
const sayHello = require('./module.js');
sayHello();

这种方式需要借助构建工具在前端使用。

三、使用构建工具

3.1、Webpack

Webpack是一种强大的前端构建工具，能够将多个JavaScript模块打包成一个或多个文件。它支持代码分割、按需加载等高级特性。

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'
                }
            }
        ]
    }
};

项目目录结构：

project │ ├── src │ └── index.js │ ├── dist │ └── bundle.js │ ├── webpack.config.js └── package.json

在HTML文件中引入打包后的文件：

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

3.2、Parcel

Parcel是另一个强大的构建工具，具有零配置的特点，适合快速开发和小型项目。

使用Parcel：

安装Parcel：

npm install --save-dev parcel-bundler

创建 index.html 和 index.js 文件：

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

// index.js
console.log('Hello World!');

启动Parcel：

parcel index.html

四、利用CDN

CDN（内容分发网络）能够加速资源加载，特别适用于引入第三方库。将第三方库的CDN链接直接添加到HTML文件中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
    <h1>Hello World</h1>
    <div id="app">{{ message }}</div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

五、引入JS的最佳实践

5.1、异步加载脚本

异步加载脚本能够提高页面加载速度，减少阻塞。可以使用 async 和 defer 属性。

<script src="main.js" async></script>
<script src="main.js" defer></script>

5.2、代码分割

代码分割能够将大型应用拆分成多个小模块，按需加载，提升性能。Webpack和Parcel等工具都支持代码分割。

5.3、使用构建工具进行优化

构建工具能够压缩和混淆JavaScript代码，减少文件体积，提升加载速度。还可以进行Tree Shaking，去除未使用的代码。

5.4、使用现代JavaScript特性

现代JavaScript特性（如ES6+）能够提高代码的可读性和可维护性。使用Babel等工具进行转译，保证兼容性。

六、项目管理系统的推荐

在项目开发过程中，使用高效的项目管理系统能够提高团队协作效率。推荐两个系统：

6.1、研发项目管理系统PingCode

PingCode专注于研发项目管理，提供需求管理、缺陷跟踪、迭代管理等功能，适合技术团队使用。

6.2、通用项目协作软件Worktile

Worktile是一个通用的项目协作软件，支持任务管理、日程安排、文件共享等功能，适合各种类型的团队。

通过以上方法和工具，可以更高效地在项目中引入JavaScript，提高代码质量和项目管理效率。