2018-04-23 3 分钟读完 (大约 459 个字)

将 vue 插件发布到 npm

1、准备好 Vue 插件

在发布 npm 之前，你需要按照Vue插件开发手册开发完成你的 Vue 插件。

2、创建一个简单的项目

通过 webpack-simple 来新建一个简单的项目。

1	vue init webpack-simple [your plugin name]

目录结构如下图：

3、封装插件

1、创建 src/lib 目录，建立index.js文件

2、填充相应内容

/*
* 按照 Vue查看开发手册 开发的插件
*/
const yourPlugin = {
    install: function(Vue, options) {
    // ....
    }
};
/***** 新增内容 *****/
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(yourPlugin)
}
export default yourPlugin;
/***** 新增内容 *****/

如果你的插件依赖其他 css 或者库，同样可以在 index.js 中 import。

4、配置

1、webpack配置

修改webpack.config.js

module.exports = {
    entry: './src/lib/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'plugin-name.js',
        library: "plugin-name",
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    // ...
}

entry 修改入口文件的路径
output 配置最终输出的代码
- filename 输出的文件名称，修改成插件名称
- library 新增导出库的名称
- libraryTarget 新增导出库的方式
- umdNamedDefine 对AMD模块重命名
- webpack.config.js 按照上述配置完毕，可以通过 npm run build 来进行构建。

2、package.json配置

{
    //...
    "license": "MIT",
    "private": false,
    "main": "dist/vue-easy-loading.js",
    "repository": {
        "type": "git",
        "url": "https://github.com/..."
    }    
    // ...
}