【亲测免费】 Tom Select 开源项目教程

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

Tom Select 项目的目录结构如下：

tom-select/
├── dist/
│   ├── css/
│   │   └── tom-select.default.css
│   ├── js/
│   │   ├── tom-select.base.js
│   │   └── tom-select.complete.js
├── src/
│   ├── css/
│   │   └── tom-select.scss
│   ├── js/
│   │   ├── plugins/
│   │   └── tom-select.js
├── test/
├── .gitignore
├── LICENSE
├── package.json
├── README.md
└── webpack.config.js

目录介绍

• dist/：包含编译后的文件，可以直接用于生产环境。
  • css/：包含编译后的 CSS 文件。
  • js/：包含编译后的 JavaScript 文件。
• src/：包含源代码文件。
  • css/：包含 SCSS 文件。
  • js/：包含 JavaScript 源代码文件和插件。
• test/：包含测试文件。
• .gitignore：Git 忽略文件配置。
• LICENSE：项目许可证。
• package.json：项目依赖和脚本配置。
• README.md：项目说明文档。
• webpack.config.js：Webpack 配置文件。

2. 项目的启动文件介绍

Tom Select 的启动文件主要是 dist/js/tom-select.complete.js。这个文件包含了所有必要的依赖和插件，可以直接在项目中使用。

使用方法

在 HTML 文件中引入 CSS 和 JavaScript 文件：

<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>

然后初始化 Tom Select：

<select id="tom-select-it"></select>
<script>
  new TomSelect('#tom-select-it', {
    // 配置选项
  });
</script>

3. 项目的配置文件介绍

Tom Select 的配置文件主要是 package.json 和 webpack.config.js。

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "tom-select",
  "version": "2.3.1",
  "description": "Tom Select is a dynamic & lightweight (~16kb gzipped) <select> UI control with autocomplete and native-feeling keyboard navigation.",
  "main": "dist/js/tom-select.complete.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "select",
    "ui",
    "control",
    "autocomplete"
  ],
  "author": "Contributors",
  "license": "Apache-2.0",
  "dependencies": {
    // 依赖列表
  },
  "devDependencies": {
    // 开发依赖列表
  }
}

webpack.config.js

webpack.config.js 文件是 Webpack 的配置文件，用于构建和打包项目。

const path = require('path');

module.exports = {
  entry: './src/js/tom-select.js',
  output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: 'tom-select.complete.js',
    library: 'TomSelect',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    // 插件列表