不用框架js怎么搭项目

不用框架JS怎么搭项目：选择合适的项目结构、配置打包工具、编写核心功能模块、集成开发和测试工具。在这里我们将详细介绍如何在没有框架的情况下，从零开始搭建一个JavaScript项目。

一、选择合适的项目结构

项目目录结构：

一个良好的项目目录结构可以帮助你更好地组织代码文件，使项目更易于维护和扩展。典型的项目目录结构如下：

project-root/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── styles/ │ ├── index.js │ └── index.html ├── dist/ ├── node_modules/ ├── .gitignore ├── package.json ├── README.md └── webpack.config.js

项目根目录文件：
- package.json：用于管理项目的依赖项和脚本。
- .gitignore：忽略不必要的文件，防止它们被提交到版本控制系统。
- webpack.config.js：配置Webpack打包工具。

二、配置打包工具

安装Node.js和npm：
- 确保你的系统上安装了Node.js和npm（Node.js的包管理器），你可以通过以下命令进行安装：
```
sudo apt-get install nodejs
sudo apt-get install npm
```
初始化项目：
- 在项目根目录下运行以下命令，生成package.json文件：
```
npm init -y
```
安装Webpack和Babel：
- Webpack是一个模块打包工具，Babel是一个JavaScript编译器。通过以下命令安装它们：
```
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env
```

配置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']
                    }
                }
            }
        ]
    },
    mode: 'development'
};

配置Babel：
- 在项目根目录下创建一个名为.babelrc的文件，内容如下：
```
{
    "presets": ["@babel/preset-env"]
}
```

三、编写核心功能模块

创建HTML文件：

在src目录下创建一个名为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>
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

创建JavaScript文件：

在src目录下创建一个名为index.js的文件，用于编写项目的核心功能：

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

组织功能模块：

在src/components目录下创建多个JavaScript文件，将不同的功能模块化。比如，可以创建一个header.js文件：

export function createHeader() {
    const header = document.createElement('header');
    header.innerHTML = '<h1>My Project Header</h1>';
    return header;
}

然后在index.js中引入并使用：

import { createHeader } from './components/header';
document.addEventListener('DOMContentLoaded', () => {
    const app = document.getElementById('app');
    app.appendChild(createHeader());
});

四、集成开发和测试工具

安装ESLint：
- ESLint用于静态检查JavaScript代码，确保代码风格统一并减少错误。通过以下命令安装：
```
npm install eslint --save-dev
```
- 初始化ESLint配置：
```
npx eslint --init
```
安装Jest：
- Jest是一个用于JavaScript的测试框架。通过以下命令安装：
```
npm install jest --save-dev
```
- 在package.json中添加测试脚本：
```
"scripts": {
    "test": "jest"
}
```

编写测试用例：

在项目根目录下创建一个__tests__目录，在其中创建测试文件，比如header.test.js：

import { createHeader } from '../src/components/header';
test('createHeader creates a header element', () => {
    const header = createHeader();
    expect(header.tagName).toBe('HEADER');
    expect(header.innerHTML).toBe('<h1>My Project Header</h1>');
});

集成项目管理系统：
- 对于团队协作和项目管理，可以使用研发项目管理系统PingCode和通用项目协作软件Worktile。这些工具可以帮助团队更好地协作，跟踪任务进度，提高工作效率。

五、部署和持续集成

部署到静态网站托管服务：
- 你可以将打包后的文件部署到GitHub Pages、Netlify等静态网站托管服务上。以GitHub Pages为例，在package.json中添加以下脚本：
```
"scripts": {
    "deploy": "gh-pages -d dist"
}
```

设置CI/CD：

使用GitHub Actions等CI/CD工具，可以自动化构建和部署流程。在项目根目录下创建一个.github/workflows目录，在其中创建一个名为deploy.yml的文件，内容如下：

name: Deploy on: push: branches: - main jobs: build: runs-on: ubuntu-latest steps: - name: Checkout repository uses: actions/checkout@v2 - name: Set up Node.js uses: actions/setup-node@v1 with: node-version: '14' - name: Install dependencies run: npm install - name: Build project run: npm run build - name: Deploy to GitHub Pages uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist

六、总结

通过以上步骤，我们详细介绍了如何在没有框架的情况下搭建一个JavaScript项目。从选择合适的项目结构、配置打包工具、编写核心功能模块，到集成开发和测试工具，最后部署和设置CI/CD流程。选择合适的项目结构、配置打包工具、编写核心功能模块、集成开发和测试工具是成功搭建项目的关键。希望通过这篇文章，你能更好地理解和掌握如何搭建一个没有框架的JavaScript项目。