刀刀的知识积累

搭建环境

更新时间: 2021-07-27 17:34:58

最近看了《某科学的一方通行》，突然就很喜欢一方通行大爷的性格和爽朗的笑声，于是打算写一个小插件借鉴一下一方通行大爷的名字。

这个插件主要功能设想是赋予任何元素任意定位，可以拖拽，可以缩放大小，解决的问题是方便页面布局，然后封装vue指令，方便在vue项目中使用，任何变态布局都可以轻松通过可视拖拽完成。

设想设想，这个只是设想，不代表都会实现哈

# 环境搭建

首先是环境搭建，由于我也是个小菜鸡，写之前构思了一下思路：

  1. 由于我要写的是js插件，所以当然是使用webpack来将es6解析成es5，然后打包成一个文件
  2. 在开发时我需要启动一个本地服务来运行我写的开发用的例子
  3. 打包的时候需要压缩代码，并且能够输出实际的代码
  4. 可以发布npm包，供我自己爽一下

来一一解决问题：

  1. webpack来将es6解析成es5，然后打包成一个文件：
    使用 @babel/core,@babel/preset-env,babel-loader,webpack,webpack-cli

  2. 在开发时我需要启动一个本地服务来运行我写的开发用的例子:
    使用 html-webpack-plugin,webpack-dev-server

  3. 打包的时候需要压缩代码，并且能够输出实际的代码:
    编写两套webpack配置

  4. 可以发布npm包，供我自己爽一下
    后面有，后面有，首先注册一个npm的账号哈

# 1.安装依赖

npm install @babel/core @babel/preset-env babel-loader webpack webpack-cli html-webpack-plugin webpack-dev-server -D

# 2.编写webpack.dev.config.js

const path = require('path') // 引入path路径
const HtmlWebpackPlugin = require('html-webpack-plugin') // 引用解析html

module.exports = { // 默认导出
  mode: 'development', // 打包模式为development，开发环境，代码不会压缩
  entry: path.join(__dirname, 'example', 'index.js'), // 需要打包的代码路径，入口文件，webpack会从改入口文件不断延伸查找所需依赖
  output: { // 打包完成输出的配置
    libraryTarget: 'umd', //类库加载方式
    filename: 'bundle.js', // 输出的文件名
    path: path.join(__dirname, 'example' ,'dist') // 输出的文件夹
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',//使用 babel-loader
          options: {
            presets: ['@babel/preset-env']//包含es6转成es5的模块
          }
        }
      }
    ]
  },
  plugins: [ // 解析html文件
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'example', 'index.html'), // 源文件
      filename: 'index.html' // 输出文件
    })
  ],
  devServer: { // 启动端口
    port: 3000,
    contentBase: path.join(__dirname, 'example' ,'dist') // 执行dist文件夹里面的内容
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 3.编写webpack.prod.config.js

const path = require('path') // 引入path路径

module.exports = { // 默认导出
    mode: 'production', // 打包模式为development，开发环境，代码不会压缩
    entry: path.join(__dirname, 'src', 'index.js'), // 需要打包的代码路径，入口文件，webpack会从改入口文件不断延伸查找所需依赖
    output: { // 打包完成输出的配置
      libraryTarget: 'umd', //类库加载方式
      filename: 'acceleratorkunn.js', // 输出的文件名
      path: path.join(__dirname,'dist') // 输出的文件夹
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',//使用 babel-loader
            options: {
              presets: ['@babel/preset-env']//包含es6转成es5的模块
            }
          }
        }
      ]
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 4.修改package.json





 
 
 
 
 


















{
  "name": "acceleratorkunn",
  "version": "1.0.0",
  "description": "一方通行，一个可以赋予普通元素任意定位，可拖拽，可伸缩大小的插件",
  "main": "src/index.js",
  "scripts": {
    "dev": "webpack serve --config webpack.dev.config.js",
    "build": "webpack --config webpack.prod.config.js"
  },
  "repository": {
    "type": "git",
    "url": "https://gitee.com/knif/AcceleratorKunn.git"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.14.8",
    "@babel/preset-env": "^7.14.8",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.46.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 代码编写

环境搭建完毕，现在开始写一下代码测试，首先是代码结构

acceleratorKunn
├── src //插件源码放在这里
│   └── index.js
├── example //这里是开发时的测试页面的目录
│   ├── index.html //测试页面html
│   └── index.js //测试页面js
├── dist //打包的文件在这
│   └── acceleratorkunn.js //打包好的js文件 
├── webpack.dev.config.js  //开发环境的webpack配置
├── webpack.prod.config.js //生产环境的webpack配置
└── package.json //npm的配置
1
2
3
4
5
6
7
8
9
10
11
<!-- example/index.html ->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
//src/index.js
class Accelerator {
    constructor(config){
        this.x = config.x
        this.y = config.y
        this.width = config.width
        this.height = config.height
        this.setConfig()
    }
    setConfig(){
        console.log("初始化咯")
    }
}

window.Accelerator = Accelerator
export default Accelerator
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//example/index.js
import Accelerator from "../src/index.js";
const a = new Accelerator({
    x:10,
    y:10,
    width:10,
    height:10
})
console.log(a)
1
2
3
4
5
6
7
8
9

  • 然后在命令行运行 npm run dev,打开localhost:3000，会发现控制台里打印出来了。 成功！

  • 然后在命令行运行 npm run build,生成了dist目录，并且打包成功

# npm发布

  1. npm账号注册完之后，首先来修改package.json,修改version和main


 

 





















{
    "name": "acceleratorkunn",
    "version": "1.0.0",
    "description": "一方通行，一个可以赋予普通元素任意定位，可拖拽，可伸缩大小的插件",
    "main": "dist/acceleratorkunn.js",
    "scripts": {
      "dev": "webpack serve --config webpack.dev.config.js",
      "build": "webpack --config webpack.prod.config.js"
    },
    "repository": {
      "type": "git",
      "url": "https://gitee.com/knif/AcceleratorKunn.git"
    },
    "author": "zhangzhou",
    "license": "ISC",
    "devDependencies": {
      "@babel/core": "^7.14.8",
      "@babel/preset-env": "^7.14.8",
      "babel-loader": "^8.2.2",
      "html-webpack-plugin": "^5.3.2",
      "webpack": "^5.46.0",
      "webpack-cli": "^4.7.2",
      "webpack-dev-server": "^3.11.2"
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

  1. 然后进入项目根目录，运行npm login，输入自己的用户名，密码和邮箱

  2. 登录成功后执行npm publish，就发布成功了

好啦，环境搭完啦，明天继续（不一定是明天）

← 基础定位功能开发 →

MIT Licensed | Copyright © 2021-present 刀刀