Vux: 按需加载时，babel-loader如何配置

[agileago]

当我按需加载vue组件时，比如

import Sticky from 'vux/src/components/sticky/index.vue'

这个组件时，因为index.vue里面包含sticky.js，但是sticky.js是用es6语法写的，而我们已经配置了babel-loader的exclude选项把node_modules排除掉了，该怎么写exclude才能把vux加入babel的编译中，文档中是否应该加入提醒？

[airyland]

按需加载建议从npm安装后，从 vux/components/sticky/ 加载

[agileago]

有这个文件夹么？

[airyland]

有的，上周增加为每个组件都构建了单独的.js

[agileago]

就是说如果想引用npm文件夹下面的文件，想让babel把他纳入编译范围该怎么配置exclude?

[airyland]

vux发布到npm的最新版本已经把 src 目录忽略了。
webpack可以配置exclude和include, 你先试试看能不能把vux目录排除。
https://webpack.github.io/docs/configuration.html

[agileago]

@airyland 我折腾1个小时，google,baidu 都没发现该怎么写，才过来问的，包括我配置

include: path.resolve(__dirname, 'node_modules/vux')

配完了，发现babel连我自己的工程项目下的js都不认识了，囧

[airyland]

:sweat: 我今天找个时间测试下

[agileago]

更新了一下npm,看到了components目录，发现你把每个组件单独编译了一下，编译成umd格式的了，并且把css也单独抽出来了，那这样我引入组件的时候需要引入两个文件，并且每个组件都带有umd头导致最后打包出来的组件会变大，是不是应该保留src目录？ 这样引入的时候是个单文件简单、高效

import Tab from 'vux/src/components/Tab.vue'

样式也有了，会更清晰点

[airyland]

我也考虑过，是会有这样的情况。umd是为了方便使用script标签引入。如果保留src目录又会导致整个包特别大。

[agileago]

源码体积这个不用太介意吧， 我现在一般移动端的项目走编译路线，需要什么组件引入什么，PC端不用担心网速问题，用script标签引入一个大的组件库，直接页面上写，咱们这个项目主要针对移动端，应该充分考虑移动端的需求吧。

[agileago]

想了想vue组件的发布模式，

1. 应该有一个*.vue的文件夹给工程引入编译路线的人引用
2. 给不走编译路线的工程提供一个大而全的组件库js文件
3. 不编译，但还想按需加载提供umd格式组件库

[airyland]

有这样考虑过，分别发布比较繁琐，那么只能发布到同一个npm包？有没有更好的方式

[agileago]

这样写感觉怪怪的😄

[agileago]

我觉得目前vux发布模式是正确的，现在只缺少把src目录放上去，然后找到如何配置babel的方法，感觉差不多就满足大部分人的需求了

[airyland]

npm pack 试了下，包含.vue源文件打包后体积是 434k，所以确实问题不大。

[airyland]

@agileago 你试一下 npm install vux@dev
然后配置 webpack.base.conf.js的js loader，看能不能正常引用.vue？暂时没有找到更好的配置方式

{
test: /.js$/,
loader: 'babel',
include: projectRoot,
exclude: /(core-js|eventsource|babel)/
}

[airyland]

更正，直接添加一条Loader更简单

{
  test: /vux.src.*?js$/,
   loader: 'babel'
}

[agileago]

刚回来，一会试一下，感觉相当棒！

[agileago]

perfect !👍👍
很好奇你是如何找到这种方式的，我一开始完全没有思路，babel文档上也没有，google也没有，另外我看你用得是less，个人觉得用这些方言如果没有智能提示是很痛苦的一件事情，好在webstorm12eap支持行内less和sass了，相当强大，你可以下一个试试，可以这样写

<style lang="less" rel="stylesheet/less">
@var: red;
div {
color: @var;
}
</style>

有智能提示的，并且能提示你模板的类名, https://github.com/vuejs/vue-syntax-highlight/issues/3

[airyland]

@agileago 哈哈，我对webpack也不算熟悉，看着文档测试测试就找到方法了

[mlyknown]

test: /vux.src.*?js$/, 这句话匹配的是什么格式的啊，， 为啥你们对话，偶看不大懂

[airyland]

@mlyknown 匹配vux js文件的绝对路径，因为在不同系统可能分隔符不一样，于是直接用.代替了。

/node_modules/vux/src/somecomponent/somejs.js
node_modules\vuxsrc\somecomponent\somejs.js

[mlyknown]

thanks 最近打算研究哈VUX，哈哈 0.0

[exoticknight]

webpack 现在只能用 dist 引入了？
src 引入出现一大堆问题，我看了看代码，凡是引入 vue 文件都没有加后缀 .vue 所以全是报错
直接修改了源代码又会出现 Uncaught TypeError: _datetimepicker2.default is not a constructor 的错误……菜鸟求指导……
还有一个问题，如果用 vue 组件引入的方式，是不是只需要全局引入 vue.css 就可以了？组件的 css 应该是 scoped 在组件里面了？

[airyland]

@exoticknight 安装问题麻烦看文档。

[exoticknight]

@airyland
为了肯定按照文档做也出问题，直接开了新项目，用的是 webpack-simple 模板，依然报错。
BTW，如果看文档有用我就不会开 issue 问了

[airyland]

@exoticknight https://vuxjs.gitbooks.io/vux/content/install/vue.html 文档写着配置loader, 那么你配置了吗？

[exoticknight]

图给您上
webpack.base.conf.js 和 webpack.conf.js 里面配置了也没用
本身报错根本就不是找不到 js 文件，而是 ‘Module not found: Error: Cannot resolve module 'vux/src/components/group'’，我手动修改源码直接引用 'index.vue' 解决引入错误但是出现其他错误了，我在前一次发言中都给您详细描述了

[airyland]

@exoticknight 建议你用webpack模板试一下。文档里用的是webpack。

[agileago]

@exoticknight 我刚才试了一下可以的，没有报错，你是不是哪里配错了？

配置里面要加上这两个配置

[agileago]

[exoticknight]

@agileago
比对了用 webpack 模板和 webpack-simple 模板建项目的 conf，应该就是阁下所指出 resolve 字段问题
如此一来，index.vue 似乎是非必要的
最后再问一个问题，使用 vue 组件的方式，@import '~vux/dist/vux.css'; 是必要的吗？
十分感谢！

[lichunqiang]

是必要的

[agileago]

@exoticknight 那的看你引用的那个组件是否使用了weui的样式，如果没有就不需要，听说 @airyland 后期要把weui的样式分布到组件中去，那样的话你直接引用组件就行了，不过你首先应该有个全局的reset.css

[airyland]

目前还是需要引入vux.css。预计两周内拆分出来。