webpack内置插件ProvidePlugin的应用

为避免多个vue文件通过import引用js文件，故定义全局变量，例如vue引入utils全局使用

utils/index.js

/* eslint-enable */
const utils = {
  getName: function(name) {
    return name
  },
}
export default utils


// const getName = fnction (name) {
//    return name
// }
// export { getName }

vue.config.js

module.exports = {
    return {
      // 引入全局变量utils
      plugins: [
        new webpack.ProvidePlugin({
         // 1.export default方式导出此处要加'default'
          utils: [path.resolve(__dirname, 'src/utils/index.js'), 'default']
          // 2. export 导出
          // utils: path.resolve(__dirname, 'src/utils/index.js')
        }),
      ]
    }
  }
}

.eslintrc.js

{
  globals: {
    utails: 'readonly' // 或者true
  }
}
// 配置为readonly是因为我们不会改写lodash，仅仅是调用其方法。

页面使用

utils.getName('玛卡巴卡')