vue2 项目下载依赖 遇到模块解析错误

vue2 项目遇到模块解析错误

打包时，./~/wx-vue2-picker/lib/wx-vue2-picker.umd.js:1808 文件编译失败

原因：依赖包文件包含箭头函数

加配置

{
    test: /.js$/,
    loader: 'babel-loader',
    include: [
      path.resolve(__dirname, '../node_modules/wx-vue2-picker'), //转es5语法
    ]
},

或者报如下错误

ERROR in ./~/v-viewer/dist/index.umd.js
Module parse failed: D:\Repository\OCSS6.0\mes_html\app\node_modules\v-viewer\dist\index.umd.js Unexpected token (1:744)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:744)
​
// 解决办法 "v-viewer": 1.6.4 换成 "v-viewer": "1.5.0",就好了

扩展一些模块解析

module: {
    preLoaders: [
      {
        test: /.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: [/node_modules/]
      },
      {
        test: /.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: [/node_modules/, /public/]
      }
    ],
    loaders: [
     // {
       // test: /.js$/,
        //loader: 'vue-loader',
        //include: [
         // path.resolve(__dirname, //'../node_modules/v-viewer'), //转es5语法
        //]
      //},
      {
        test: /vux.src.*?js$/,
        loader: 'babel',
        exclude: [/node_modules/, /mui/, /cityData/, /echarts.min/, /jquery/, /MD5/, /base64/, /sdk/, /ytx-web-im-sdk/]
      },
      {
        test: /.vue$/,
        loader: 'vue'
      },
      {
        test: /.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: [/node_modules/, /mui/, /cityData/, /echarts.min/]
      },
      {
        test: /.json$/,
        loader: 'json'
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: 'url',
        query: {
          limit: 1,
          // name: utils.assetsPath('img/[name].[hash:7].[ext]'),
          name: utils.assetsPath('img/[name].[ext]')
        }
      },
      {
        test: /.(mp3|wav)?$/,
        loader: 'url',
        query: {
          limit: 1,
          name: utils.assetsPath('sound/[name].[ext]')
        }
      },
      {
        test: /.html$/,
        loader: 'vue-html'
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: 'url',
        query: {
          limit: 1,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },

总结：

• babel-loader 和 vue-loader 都是基于 Webpack 的加载器，用于将 JavaScript 代码转换为浏览器可以支持的 ES5 代码。
• babel-loader 主要用于将最新 JavaScript 代码转换为浏览器可以支持的 ES5 代码，支持多种语言特性，保持向后兼容性，配置灵活。
• vue-loader 主要用于将 Vue.js 代码转换为浏览器可以支持的 ES5 代码，支持 Vue.js 语法，保持向后兼容性，配置灵活。