原生js怎么搭建项目

原生JS搭建项目的步骤包括：创建项目目录、初始化项目、编写HTML/CSS/JS文件、设置开发环境、使用模块化开发、添加构建工具。 在这些步骤中，设置开发环境尤为重要，因为它可以显著提升开发效率和代码质量。通过使用代码编辑器、版本控制系统、包管理工具、构建工具等，可以让开发过程更加顺畅和可管理。

一、创建项目目录

在开始任何项目之前，首先需要创建一个项目目录。这个目录将包含你所有的项目文件和子目录。

创建根目录：在你的电脑上创建一个新的文件夹，命名为你的项目名称。例如，可以命名为“my-js-project”。
创建子目录：在根目录下创建一些子目录，比如“src”用于存放源码文件、“dist”用于存放构建后的文件、“assets”用于存放静态资源（如图片、字体等）。

mkdir my-js-project cd my-js-project mkdir src dist assets

二、初始化项目

初始化项目是为项目创建一个基本的结构，并使其具备可扩展性。

初始化npm：使用npm初始化项目，这将创建一个package.json文件，用于管理项目的依赖和脚本。

npm init -y

添加基本文件：在“src”目录下创建基本的HTML、CSS和JS文件。

touch src/index.html src/styles.css src/index.js

三、编写HTML/CSS/JS文件

编写基础的HTML、CSS和JS代码是任何前端项目的核心部分。以下是一个简单的示例：

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My JS Project</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app"></div>
    <script src="index.js"></script>
</body>
</html>

styles.css：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}
#app {
    text-align: center;
    margin-top: 50px;
}

index.js：

document.addEventListener('DOMContentLoaded', function() {
    const app = document.getElementById('app');
    app.innerHTML = '<h1>Hello World!</h1>';
});

四、设置开发环境

设置开发环境是为了提高开发效率和代码质量。以下是一些常见的步骤：

使用代码编辑器：选择一个现代的代码编辑器，例如Visual Studio Code，它提供了丰富的插件支持和良好的用户体验。
版本控制：使用Git进行版本控制，创建一个.gitignore文件来忽略不必要的文件。

git init
touch .gitignore
echo "node_modules/" >> .gitignore
echo "dist/" >> .gitignore

包管理工具：使用npm或yarn来管理项目的依赖。

npm install --save-dev eslint npx eslint --init

五、使用模块化开发

模块化开发可以让代码更加结构化和可维护。可以使用ES6模块或者CommonJS模块。

ES6模块：在index.js文件中使用import和export语法。

// src/module.js
export function greet() {
    return 'Hello, World!';
}
// src/index.js
import { greet } from './module.js';
document.addEventListener('DOMContentLoaded', function() {
    const app = document.getElementById('app');
    app.innerHTML = `<h1>${greet()}</h1>`;
});

CommonJS模块：使用require和module.exports语法。

// src/module.js
module.exports = {
    greet: function() {
        return 'Hello, World!';
    }
};
// src/index.js
const { greet } = require('./module');
document.addEventListener('DOMContentLoaded', function() {
    const app = document.getElementById('app');
    app.innerHTML = `<h1>${greet()}</h1>`;
});

六、添加构建工具

构建工具可以帮助你自动化许多任务，如代码打包、压缩、转译等。常见的构建工具有Webpack、Gulp等。

安装Webpack：

npm install --save-dev webpack webpack-cli

配置Webpack：创建一个webpack.config.js文件。

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

安装Babel：

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

编写构建脚本：在package.json中添加构建脚本。

"scripts": {
    "build": "webpack --mode production"
}

通过执行npm run build，Webpack将会打包你的代码并输出到dist目录中。

七、测试和调试

测试和调试是确保代码质量的重要步骤。可以使用Jest、Mocha等测试框架来编写单元测试。

安装Jest：

npm install --save-dev jest

编写测试：创建一个test目录，并在其中编写测试文件。

// test/module.test.js
const { greet } = require('../src/module');
test('greet returns "Hello, World!"', () => {
    expect(greet()).toBe('Hello, World!');
});

运行测试：在package.json中添加测试脚本。

"scripts": {
    "test": "jest"
}

执行npm test来运行测试。

八、部署

部署是将你的应用发布到生产环境中的过程。可以选择使用静态托管服务（如Netlify、Vercel）或者自己的服务器。

使用Netlify：
- 注册一个Netlify账号
- 连接你的Git仓库
- 设置构建命令和发布目录（例如，构建命令为npm run build，发布目录为dist）
使用Vercel：
- 注册一个Vercel账号
- 连接你的Git仓库
- 设置项目配置并部署

九、项目管理

在项目开发过程中，使用项目管理工具可以帮助你更好地组织和协作。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。

PingCode：PingCode是一款强大的研发项目管理工具，适用于敏捷开发和瀑布式开发。它提供了需求管理、任务分配、进度跟踪等功能。
Worktile：Worktile是一款通用的项目协作软件，适用于各种团队和项目类型。它提供了任务管理、时间管理、文件共享等功能。

通过使用这些工具，你可以更高效地管理项目，提高团队协作效率。

十、总结

通过以上步骤，你可以从零开始搭建一个原生JS项目。每个步骤都有其重要性和必要性，从创建项目目录、初始化项目、编写HTML/CSS/JS文件，到设置开发环境、使用模块化开发、添加构建工具，再到测试和调试、部署以及项目管理，都需要仔细规划和执行。希望这篇文章能够帮助你更好地理解和实践原生JS项目的搭建过程。