从零开始，搭建vue插件的开发环境并将插件开源到npm

Demo

vue组件 - 包含eslint和jest
vue指令

搭建开发环境

一般来说，当我们自己想要写一个vue的组件或插件的时候，会选择使用webpack自己搭建开发环境，而不是使用vue-cli来生产开发环境。

初始化项目

首先使用命令git init初始化一个git仓库用于管理我们的代码，然后使用命令npm init -y来快速生成一个package.json的文件（后续会根据需要进行修改）。如下：

配置基础的webpack

我们的目标是写一个vue的组件或者指令，那么webpack当然是少不了。我们将采用webpack来搭建我们的开发环境。首先使用npm i -D webpack webpack-cli安装webpack和webpack-cli（webpack4之后要求必须安装webpack-cli）到我们的项目中，然后在项目根目录创建一个webpack.config.js的文件和名为src的文件夹。目录结构如下：

./src/main.js文件将作为我们打包的入口文件。webpack.config.js文件则是我们配置webpack进行打包的文件。这时候就可以在webpack.config.js中写出基本的配置了。

const path = require('path');

const resolve = (p) => {
   
    return path.resolve(__dirname, p);
}

module.exports = {
   
    entry: {
   
        main: resolve('./src/main')
    },
    output: {
   
        filename: '[name].js',
        path: resolve('./dist')
    },
    mode: 'production'
};

配置过webpack的童鞋就知道上面这个配置明显不能满足我们开发的需求，在开发中，我们会采用ES6的语法，那么就需要引入@babel/core @babel/preset-env babel-loader;需要对vue的代码进行解析，那么就需要引入vue-loader；需要解析vue的模板文件，需要引入vue-template-compiler；使用SCSS预编译来写css的代码，就需要node-sass sass-loader style-loader css-loader；对css自动添加前缀需要引入postcss-loader autoprefixer；对图片、字体文件进行编译则需要引入file-loader；使用mini-css-extract-plugin把项目中的css文件提取到单独的文件中；使用html-webpack-plugin生成html文件模板；
将上述文件引入之后就可以写出这样的配置文件：

// webpack.config.js
const path = require('path');
const vueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const resolve = (p) => {
   
    return path.resolve(__dirname, p);
}

module.exports = {
   
    entry: {
   
		main: resolve('./src/main')
    },
    
    output: {
   
        filename: '[name].js',
        path: resolve('./dist')
    },

    resolve: {
   
        extensions: ['.vue', '.js', '.jsx', '.json'],
        alias: {
   
            '@': resolve('./src/')
        }
    },

    module: {
   
        rules: [
            {
   
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
   
                test: /\.jsx?$/,
                use: ['babel-loader', 'astroturf/loader'],
                exclude: /node_modules/
            },
            {
   
                test: /\.(css|scss|sass)$/,
                use: [{
   
                    loader: MiniCssExtractPlugin.loader,
                    options: {
   
                        hmr: true,
                        reloadAll: true
                    }
                }, 'css-loader', 'postcss-loader', 'sass-loader']
            },
            {
   
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: ['file-loader']
            }
        ]
    },

    plugins: [
        new htmlWebpackPlugin({
   
            filename: 'index.html',
            inject: 'body'
        }),
        new vueLoaderPlugin(),
        new MiniCssExtractPlugin({
   
            filename: 'css/[name].[hash:8].css',
            chunkFilename: 'css/[id].[hash:8].css'
        })
    ]
};

我们配置babel的时候一般会在根目录下面创建一个.babelrc的文件用来单独配置babel相关属性

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

在配置postcss相关属性时，会创建一个postcss.config.js的文件

module.exports = {
   
  plugins: [require("autoprefixer")]
};

上面的配置基本是一个较为完整的webpack的配置了，可以再./src/main.js中随便写点ES6的代码进行测试。
但是上面的配置也会产生一些问题，如果我们把所有配置都写在一起的话，在生产环境中，我们通常需要对源码进行调试，需要起一个本地的服务器来运行我们的代码。而在生产环境中则不同，需要对代码进行压缩，也不需要本地服务器。所以一般情况下会将开发和生产的配置分开。

分离开发和生产环境的配置

我们会将公共的配置写在一个文件中，然后在生产配置文件和开发配置文件中使用webpack-merge来合并配置。npm i -D webpack-merge安装webpack-merge。
我们先来调整一下项目结构。

-- example /* 开发环境用于测试的目录 */
	|-- App.vue
	|-- index.html
	|-- main.js /* 入口文件 */

-- src /* 要发布的组件或插件的目录 */
	|-- main.js /* 入口文件 */

-- .babelrc /* babel配置文件 */
-- .gitignore
-- package.json
-- postcss.config.js /* postcss配置文件 */
-- README.md
-- webpack.common.conf.js /* 公共的webpack配置文件 */
-- webpack.dev.conf.js /* 开发环境的webpack配置文件 */
-- webpack.prod.conf.js /* 生产环境的webpack配置文件 */

部分代码如下：
公共配置文件：w