npm插件开发(基于vue-cli3.x)

更新于：2019-11-07

创建项目

vue create your-project-name

调整目录

1. 将src修改为examples存放示例
2. 新建packages存放组件
   

配置项目以支持新的目录结构

我们通过上一步的目录改造后，会遇到两个问题。

1. src 目录更名为 examples ，导致项目无法运行
2. 新增 packages 目录，该目录未加入 webpack 编译
   注：cli3 提供一个可选的 vue.config.js 配置文件。如果这个文件存在则他会被自动加载，所有的对项目和webpack的配置，都在这个文件中。

重新配置入口，修改配置中的 pages 选项

新版 Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。
这里使用 pages 修改入口到 examples

module.exports = {
   
    // 修改 src 为 examples
    pages: {
   
        index: {
   
            entry: "examples/main.js",
            template: "public/index.html",
            filename: "index.html"
        }
    },
};

• 支持对 packages 目录的处理，修改配置中的 chainWebpack 选项
  packages 是我们新增的一个目录，默认是不被 webpack 处理的，所以需要添加配置对该目录的支持。
  chainWebpack 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。

// 扩展 webpack 配置，使 packages 加入编译
    chainWebpack: config => {
   
        config.module
            .rule('js')
            .include
            .add('/packages/')
            .end()
            .use('babel')
            .loader('babel-loader')
            .tap(options => {
   
                // 修改它的选项...
                return options
            })