JSketcher 项目教程

JSketcher 项目教程

jsketcher Parametric 2D and 3D modeler written in pure javascript 项目地址: https://gitcode.com/gh_mirrors/js/jsketcher

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

JSketcher 是一个用纯 JavaScript 编写的参数化 2D 和 3D 建模工具。项目的目录结构如下：

jsketcher/
├── build/
├── dev-guide/
├── misc/
├── modules/
├── test/
├── web/
├── .babelrc
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── Gruntfile.js
├── LICENSE
├── README.md
├── cypress.json
├── externals.d.ts
├── package-lock.json
├── package.json
├── tsconfig.json
└── webpack.config.js

目录结构介绍

• build/: 存放构建后的文件。
• dev-guide/: 开发指南相关文档。
• misc/: 杂项文件。
• modules/: 项目的主要模块文件。
• test/: 测试文件。
• web/: 前端相关文件。
• .babelrc: Babel 配置文件。
• .editorconfig: 编辑器配置文件。
• .eslintrc.json: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .prettierrc: Prettier 配置文件。
• Gruntfile.js: Grunt 任务配置文件。
• LICENSE: 项目许可证。
• README.md: 项目介绍文档。
• cypress.json: Cypress 测试配置文件。
• externals.d.ts: TypeScript 外部声明文件。
• package-lock.json: npm 锁定文件。
• package.json: npm 项目配置文件。
• tsconfig.json: TypeScript 配置文件。
• webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

JSketcher 项目的启动文件是 package.json 中的 start 脚本。通过运行以下命令启动项目：

npm start

package.json 中的启动脚本

{
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js --open"
  }
}

该脚本使用 webpack-dev-server 启动开发服务器，并根据 webpack.config.js 配置文件进行构建和热更新。

3. 项目的配置文件介绍

webpack.config.js

webpack.config.js 是 Webpack 的配置文件，用于配置项目的构建过程。以下是该文件的主要内容：

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'
        }
      }
    ]
  },
  devServer: {
    contentBase: './dist'
  }
};

配置文件介绍

• entry: 指定项目的入口文件。
• output: 指定构建后的输出文件路径和文件名。
• module: 配置模块加载规则，例如使用 babel-loader 处理 JavaScript 文件。
• devServer: 配置开发服务器，指定服务器根目录。

.babelrc

.babelrc 是 Babel 的配置文件，用于配置 JavaScript 的编译选项。以下是该文件的主要内容：

{
  "presets": ["@babel/preset-env"]
}

配置文件介绍

• presets: 指定使用的 Babel 预设，例如 @babel/preset-env 用于支持最新的 JavaScript 语法。

.eslintrc.json

.eslintrc.json 是 ESLint 的配置文件，用于配置代码检查规则。以下是该文件的主要内容：

{
  "extends": "eslint:recommended",
  "rules": {
    "no-console": "off"
  }
}

配置文件介绍

• extends: 继承 ESLint 推荐的规则集。
• rules: 自定义规则，例如关闭 no-console 规则。

通过以上配置文件，JSketcher 项目可以实现代码的编译、构建和代码质量检查。

jsketcher Parametric 2D and 3D modeler written in pure javascript 项目地址: https://gitcode.com/gh_mirrors/js/jsketcher