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