[Bug Report] 在Vue-cli3.0以插件方式在main.js中引入组件报错“exports is not defined”

[Sprite-FFF]

VUX version

2.9.2

OS/Browsers version

win10 chrome最新

Vue version

2.5.17

Code

import Vue from 'vue'
import  { ToastPlugin } from 'vux'
Vue.use(ToastPlugin)

Steps to reproduce

在main.js中以插件方式引入，会抛出错误 ，但是在组件就不会

What is Expected?

能够在main.js中以插件形式全局注入某个组件

What is actually happening?

不能在main.js中全局注入 会报错

[17hz]

+1

[co-kevin]

PR fix(es6): change to es6 module style #3098

还没合进去，急的话可以 clone 这个代码，从本地安装依赖

[triggerlife]

+1,请问这问题解决了么

[co-kevin]

@triggerlife 我已经解决了这个问题，PR 还没人 Review 和合并，可以暂时直接使用我解决过问题的版本库

$ npm install github:hookszhang/vux

[gendseo]

@hookszhang 这位大佬是把这个问题解决了的

[huangjinlin]

@hookszhang 使用你的分支,在main.js中引用组件没问题了,但是会报'如果你看到这一行，说明 vux-loader 配置有问题或者代码书写规范的原因导致无法解析成按需引入组件，会导致打包体积过大。请升级到最新版本 vux-loader'这个错误,不知道你有没有办法解决这个问题

[co-kevin]

@huangjinlin 这个问题我也注意到了，我有空的时候看看如何解决

[naifen00]

刚好遇到，mark下

[Jiiiiiin]

+1

[LonelyYang]

这个问题有解决吗，用了@hookszhang 的方法，打包出来js有14MB。。。

[Sprite-FFF]

@LonelyYang 还没有解决打包过大的问题

[co-kevin]

vux-loader 介绍 https://doc.vux.li/zh-CN/vux-loader/about.html

看了一下 vux-loader 源码，针对的还是 Webpack2，Vue CLI3 已经升级到了 Webpack4，带来了较大的改动，可能是由于这个原因导致 vux-loader 按需加载失效

但在 vue 文件中引入 X-Input 没问题，main.js 引入插件就失效确实很奇怪

Element-UI 按需加载解决方案 http://element-cn.eleme.io/#/zh-CN/component/quickstart#按需引入

采用 babel-plugin-component，这个方案也试了一下

import { ToastPlugin } from 'vux'

ERROR  Failed to compile with 2 errors                                 10:58:56

These dependencies were not found:

* vux/lib/toast-plugin in ./src/main.js
* vux/lib/toast-plugin/style.css in ./src/main.js

可能需要将组件按照规范的方式组织，这种方式也会带来较大的改动

目前没有太多时间仔细研究这个问题，先采用一个不是很优雅的方法解决吧

打包过大问题临时解决方案

直接指定要引入的组件全路径，例如 ToastPlugin

before

import { ToastPlugin } from 'vux'

after

import ToastPlugin from 'vux/src/plugins/toast'

组件全路径列表

import Actionsheet from './src/components/actionsheet/index.vue'
import Agree from './src/components/agree/index.vue'
import AjaxPlugin from './src/plugins/ajax/index.js'
import Alert from './src/components/alert/index.vue'
import AlertModule from './src/plugins/alert/module'
import AlertPlugin from './src/plugins/alert/index.js'
import AppPlugin from './src/plugins/app/index.js'
import Array2stringFilter from './src/filters/array2String.js'
import Badge from './src/components/badge/index.vue'
import base64 from './src/tools/base64/index.js'
import Blur from './src/components/blur/index.vue'
import Box from './src/components/box/index.vue'
import BusPlugin from './src/plugins/bus/index.js'
import ButtonTab from './src/components/button-tab/button-tab.vue'
import ButtonTabItem from './src/components/button-tab/button-tab-item.vue'
import Calendar from './src/components/calendar/index.vue'
import Card from './src/components/card/index.vue'
import Cell from './src/components/cell/index.vue'
import CellBox from './src/components/cell-box/index.vue'
import CellFormPreview from './src/components/cell-form-preview/index.vue'
import Checker from './src/components/checker/checker.vue'
import CheckerItem from './src/components/checker/checker-item.vue'
import CheckIcon from './src/components/check-icon/index.vue'
import Checklist from './src/components/checklist/index.vue'
import ChinaAddressData from './src/datas/china_address.json'
import ChinaAddressV1Data from './src/datas/china_address_v1.json'
import ChinaAddressV2Data from './src/datas/china_address_v2.json'
import ChinaAddressV3Data from './src/datas/china_address_v3.json'
import ChinaAddressV4Data from './src/datas/china_address_v4.json'
import ChinamobileTool from './src/tools/validator/chinaMobile.js'
import ClickOutsideDirective from './src/directives/click-outside/index.js'
import Clocker from './src/components/clocker/index.vue'
import CloseDialogsPlugin from './src/plugins/close-dialogs/index.js'
import ColorPicker from './src/components/color-picker/index.vue'
import ConfigPlugin from './src/plugins/config/index.js'
import Confirm from './src/components/confirm/index.vue'
import ConfirmPlugin from './src/plugins/confirm/index.js'
import cookie from './src/tools/cookie/index.js'
import Countdown from './src/components/countdown/index.vue'
import Countup from './src/components/countup/index.vue'
import dateFormat from './src/tools/date/format.js'
import dateRange from './src/tools/date/range.js'
import Datetime from './src/components/datetime/index.vue'
import DatetimePlugin from './src/plugins/datetime/index.js'
import DatetimeRange from './src/components/datetime-range/index.vue'
import DatetimeView from './src/components/datetime-view/index.vue'
import debounce from './src/tools/debounce/index.js'
import Demobasic from './src/components/fullpage/DemoBasic.vue'
import Demoindex from './src/components/popover/DemoIndex.vue'
import DevicePlugin from './src/plugins/device/index.js'
import DevTip from './src/components/dev-tip/index.vue'
import Divider from './src/components/divider/index.vue'
import Drawer from './src/components/drawer/index.vue'
import Flexbox from './src/components/flexbox/flexbox.vue'
import FlexboxItem from './src/components/flexbox/flexbox-item.vue'
import Flow from './src/components/flow/flow.vue'
import FlowLine from './src/components/flow/flow-line.vue'
import FlowState from './src/components/flow/flow-state.vue'
import FormatTimeFilter from './src/filters/format-time.js'
import FormPreview from './src/components/form-preview/index.vue'
import FriendlyTimeFilter from './src/filters/friendly-time.js'
import Fullpage from './src/components/fullpage/index.vue'
import Grid from './src/components/grid/grid.vue'
import GridItem from './src/components/grid/grid-item.vue'
import Group from './src/components/group/index.vue'
import GroupTitle from './src/components/group-title/index.vue'
import Icon from './src/components/icon/index.vue'
import InlineCalendar from './src/components/inline-calendar/index.vue'
import InlineDesc from './src/components/inline-desc/index.vue'
import InlineLoading from './src/components/inline-loading/index.vue'
import InlineXNumber from './src/components/inline-x-number/index.vue'
import InlineXSwitch from './src/components/inline-x-switch/index.vue'
import InviewDirective from './src/directives/inview/index.js'
import Loading from './src/components/loading/index.vue'
import LoadingPlugin from './src/plugins/loading/index.js'
import LoadMore from './src/components/load-more/index.vue'
import LocalePlugin from './src/plugins/locale/index.js'
import Marquee from './src/components/marquee/marquee.vue'
import MarqueeItem from './src/components/marquee/marquee-item.vue'
import Masker from './src/components/masker/index.vue'
import md5 from './src/tools/md5/index.js'
import Msg from './src/components/msg/index.vue'
import Name2valueFilter from './src/filters/name2value.js'
import numberComma from './src/tools/number/comma.js'
import numberPad from './src/tools/number/pad.js'
import numberRandom from './src/tools/number/random.js'
import numberRange from './src/tools/number/range.js'
import NumberRoller from './src/components/number-roller/index.vue'
import Panel from './src/components/panel/index.vue'
import Picker from './src/components/picker/index.vue'
import Popover from './src/components/popover/index.vue'
import Popup from './src/components/popup/index.vue'
import PopupHeader from './src/components/popup-header/index.vue'
import PopupPicker from './src/components/popup-picker/index.vue'
import PopupRadio from './src/components/popup-radio/index.vue'
import Previewer from './src/components/previewer/index.vue'
import Qrcode from './src/components/qrcode/index.vue'
import querystring from './src/tools/querystring/index.js'
import Radio from './src/components/radio/index.vue'
import Range from './src/components/range/index.vue'
import Rater from './src/components/rater/index.vue'
import Scroller from './src/components/scroller/index.vue'
import Search from './src/components/search/index.vue'
import Selector from './src/components/selector/index.vue'
import Shake from './src/components/shake/index.vue'
import Spinner from './src/components/spinner/index.vue'
import Step from './src/components/step/step.vue'
import StepItem from './src/components/step/step-item.vue'
import Sticky from './src/components/sticky/index.vue'
import stringTrim from './src/tools/string/trim.js'
import Swipeout from './src/components/swipeout/swipeout.vue'
import SwipeoutButton from './src/components/swipeout/swipeout-button.vue'
import SwipeoutItem from './src/components/swipeout/swipeout-item.vue'
import Swiper from './src/components/swiper/swiper.vue'
import SwiperItem from './src/components/swiper/swiper-item.vue'
import Tab from './src/components/tab/tab.vue'
import Tabbar from './src/components/tabbar/tabbar.vue'
import TabbarItem from './src/components/tabbar/tabbar-item.vue'
import TabItem from './src/components/tab/tab-item.vue'
import throttle from './src/tools/throttle/index.js'
import Timeline from './src/components/timeline/timeline.vue'
import TimelineItem from './src/components/timeline/timeline-item.vue'
import Tip from './src/components/tip/index.vue'
import Toast from './src/components/toast/index.vue'
import ToastPlugin from './src/plugins/toast/index.js'
import TransferDom from './src/directives/transfer-dom/index.js'
import TransferDomDirective from './src/directives/transfer-dom/index.js'
import trim from './src/tools/string/trim'
import Value2nameFilter from './src/filters/value2name.js'
import VArea from './src/components/v-chart/v-area.vue'
import VAxis from './src/components/v-chart/v-axis.vue'
import VBar from './src/components/v-chart/v-bar.vue'
import VChart from './src/components/v-chart/v-chart.vue'
import VGuide from './src/components/v-chart/v-guide.vue'
import Video from './src/components/video/index.vue'
import ViewBox from './src/components/view-box/index.vue'
import VLegend from './src/components/v-chart/v-legend.vue'
import VLine from './src/components/v-chart/v-line.vue'
import VPie from './src/components/v-chart/v-pie.vue'
import VPoint from './src/components/v-chart/v-point.vue'
import VScale from './src/components/v-chart/v-scale.vue'
import VTooltip from './src/components/v-chart/v-tooltip.vue'
import VuxComponentListData from './src/datas/vux_component_list.json'
import WechatEmotion from './src/components/wechat-emotion/index.vue'
import WechatPlugin from './src/plugins/wechat/index.js'
import WeekCalendar from './src/components/week-calendar/index.vue'
import WepayInput from './src/components/wepay-input/index.vue'
import XAddress from './src/components/x-address/index.vue'
import XButton from './src/components/x-button/index.vue'
import XCircle from './src/components/x-circle/index.vue'
import XDialog from './src/components/x-dialog/index.vue'
import XHeader from './src/components/x-header/index.vue'
import XHr from './src/components/x-hr/index.vue'
import XImg from './src/components/x-img/index.vue'
import XInput from './src/components/x-input/index.vue'
import XNumber from './src/components/x-number/index.vue'
import XProgress from './src/components/x-progress/index.vue'
import XSwitch from './src/components/x-switch/index.vue'
import XTable from './src/components/x-table/index.vue'
import XTextarea from './src/components/x-textarea/index.vue'

[Jiiiiiin]

干等天下雨，我也有种好无耻的赶脚 @hookszhang 兄 👍

[ontheway0101]

@hookszhang 你好，我将 #2940 在本地处理后，打包发布到npm后，使用的时候报错

$ npm install github:hookszhang/vux 

请问hookszhang/vux这个是如何打包发布的，谢谢。

或者能不能请您处理一下 #2940 ，允许我使用 github:hookszhang/vux 。

[co-kevin]

@ontheway0101 不需要发布到 npm，vux 的库我们肯定是没有权限发布的

github:hookszhang/vux 是允许直接从 github 上安装 npm 依赖，把 github 作为一个中心仓库

// 相当于 npm install https://github.com/hookszhang/vux
$ npm install github:hookszhang/vux

我用的是 Yarn，npm 应该也还有很多可选项，选择分支、从本地目录安装等可以自行 Google

你可以直接 Fork 仓库，处理好提交然后直接从你自己的仓库安装依赖

[alterhu2020]

@hookszhang, 按照你的做法,先安装了你提供的安装包: npm install github:hookszhang/vux,然后运行怎么报这个错误:

> vuecli-sample@0.1.0 serve D:\Play-Sample\vuecli-sample
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  Error: Cannot find module 'D:\Play-Sample\vuecli-sample\node_modules\vux\src\components\map.json'
Error: Cannot find module 'D:\Play-Sample\vuecli-sample\node_modules\vux\src\components\map.json'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)

你遇到这个问题了吗? @hookszhang

Edit: 确认了是引入的包的文件,直接把仓库中的代码\node_modules\vux覆盖到\node_modules\vux下面的文件夹中解决了.

[NellieNellie]

@hookszhang, 按照你的做法,先安装了你提供的安装包: npm install github:hookszhang/vux,然后运行怎么报这个错误:

> vuecli-sample@0.1.0 serve D:\Play-Sample\vuecli-sample
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  Error: Cannot find module 'D:\Play-Sample\vuecli-sample\node_modules\vux\src\components\map.json'
Error: Cannot find module 'D:\Play-Sample\vuecli-sample\node_modules\vux\src\components\map.json'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)

你遇到这个问题了吗? @hookszhang

Edit: 确认了是引入的包的文件,直接把仓库中的代码\node_modules\vux覆盖到\node_modules\vux下面的文件夹中解决了.

什么意思? 把\node_modules\vux用github:hookszhang/vux里面的\node_modules\vux覆盖吗? 我这么做了? 还是报这个错呢? 要怎么弄?

[alterhu2020]

@NellieNellie ,是的，实在不行你就把错误贴出来，缺少那个文件就复制那个文件到node_modules/vux对应的文件夹里面。

[Fun005]

@ontheway0101 不需要发布到 npm，vux 的库我们肯定是没有权限发布的

github:hookszhang/vux 是允许直接从 github 上安装 npm 依赖，把 github 作为一个中心仓库

// 相当于 npm install https://github.com/hookszhang/vux
$ npm install github:hookszhang/vux

我用的是 Yarn，npm 应该也还有很多可选项，选择分支、从本地目录安装等可以自行 Google

你可以直接 Fork 仓库，处理好提交然后直接从你自己的仓库安装依赖

你好，我提交到自己的仓库后，本地项目怎么修改相应的安装方式呢？也就是“npm install github:hookszhang/vux ” 具体是什么意思？感谢解答

[ontheway0101]

@Fun005 我想你应该在本地执行

npm install github:Fun005/vux

意思就是使用npm安装Fun005的vux项目