webpack4.0 打包 vue 开发的 Toast 插件

开发环境

npm run dev 可以实时预览插件开发的效果

在 webpack.dev.config.js 文件中
entry: {
    ui: path.resolve(__dirname, 'src/index.js')
}

线上发布环境

npm run build 打包(压缩代码)开发好的插件到 dist 目录下

在 webpack.prod.config.js 文件中
entry: {
    ui: path.resolve(__dirname, 'src/pages/Toast/index.js')
},

打包 libraryTarget 注意

output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'toast',
    libraryTarget: 'umd'
}

libraryTarget: 'umd' 这样打出来的包 可以在 `amd`,`cmd`，`commonjs` 模式下使用

script 脚本引入 插件，如何使用插件

需要在脚本里
if (window.Vue) {
  window.Vue(Toast)
}

Vue.use 注意

Vue.use(toast) 这里的 toast 可以是函数,可以是 对象，但是必须要有 install 方法。是函数 vue  从全局 import ，对象时 install(Vue)

发布 npm

• package.json 里 "main": "dist/index.js"
• .npmignore 可以把 npm publish . 需要忽略的文件 去掉

npm-run-all

看 build 命令
"scripts": {
    "clean": "rimraf -rf dist",
    "dev": "webpack-dev-server",
    "patch": "NODE_ENV=production webpack --config webpack.config.js",
    "build": "npm run clean && npm run patch"
}

用 npm-run-all 来简化

"build": "npm-run-all clean patch"