JavaScript基础项目骨架教程

孔秋宗Mora

于 2024-09-01 09:52:42 发布

阅读量81

点赞数 2

本文链接：https://blog.csdn.net/gitblog_00119/article/details/141779207

版权

JavaScript基础项目骨架教程

javascript-basic-skeleton项目地址:https://gitcode.com/gh_mirrors/ja/javascript-basic-skeleton

1. 项目的目录结构及介绍

javascript-basic-skeleton/
├── github/workflows/
│   └── cypress/
├── src/
├── tests/
├── .eslintrc
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── babel.config.json
├── cypress.json
├── index.html
├── jest.config.js
├── package-lock.json
├── package.json
├── webpack.common.js
├── webpack.dev.js
└── webpack.prod.js

github/workflows/: 包含GitHub Action工作流配置文件。
src/: 源代码目录。
tests/: 测试代码目录。
.eslintrc: ESLint配置文件。
.gitignore: Git忽略文件配置。
.prettierrc: Prettier代码格式化配置。
LICENSE: 项目许可证。
README.md: 项目说明文档。
babel.config.json: Babel配置文件。
cypress.json: Cypress配置文件。
index.html: 项目启动文件。
jest.config.js: Jest配置文件。
package-lock.json: npm锁定依赖版本文件。
package.json: npm项目配置文件。
webpack.common.js: Webpack通用配置文件。
webpack.dev.js: Webpack开发环境配置文件。
webpack.prod.js: Webpack生产环境配置文件。

2. 项目的启动文件介绍

index.html 是项目的启动文件，它包含了基本的HTML结构，用于加载和运行JavaScript代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Basic Skeleton</title>
</head>
<body>
    <script src="dist/bundle.js"></script>
</body>
</html>

3. 项目的配置文件介绍

`package.json`

package.json 是npm项目的配置文件，包含了项目的基本信息、依赖和脚本命令。

{
  "name": "javascript-basic-skeleton",
  "version": "1.0.0",
  "description": "A basic skeleton for JavaScript projects",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack serve --config webpack.prod.js",
    "test": "jest",
    "cy:open": "cypress open",
    "cy:run": "cypress run",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  },
  "dependencies": {
    // 依赖列表
  },
  "devDependencies": {
    // 开发依赖列表
  }
}

`webpack.common.js`

webpack.common.js 是Webpack的通用配置文件，包含了基本的模块打包配置。

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

`webpack.dev.js`

webpack.dev.js 是Webpack的开发环境配置文件，包含了开发服务器和热更新配置。

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
  },
});

`webpack.prod.

javascript-basic-skeleton项目地址:https://gitcode.com/gh_mirrors/ja/javascript-basic-skeleton

孔秋宗Mora

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript基础项目骨架教程

JavaScript基础项目骨架教程 javascript-basic-skeleton项目地址:https://gitcode.com/gh_mirrors/ja/javascript-basic-skeleton 1. 项目的目录结构及介绍javascript-basic-skeleton/├── github/workflows/│ └── cypress/├── src/├...
复制链接

扫一扫