首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么webpack不能加载从vue组件导入的*.js类?

Webpack不能加载从Vue组件导入的.js类的原因是因为Vue组件的.js文件中使用了ES6的模块语法,而Webpack默认只能处理CommonJS规范的模块导入。

在Vue组件中,如果使用了ES6的模块语法导入一个*.js类,例如:

代码语言:txt
复制
import MyClass from './myClass.js';

Webpack在处理这个导入语句时会报错,提示无法解析这个模块。

解决这个问题的方法有两种:

  1. 使用Webpack的babel-loader来处理ES6的模块语法。首先,安装babel-loader和相关的Babel插件:
代码语言:txt
复制
npm install babel-loader @babel/core @babel/preset-env --save-dev

然后,在Webpack的配置文件中添加babel-loader的配置:

代码语言:txt
复制
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

这样,Webpack在处理*.js文件时会使用babel-loader来转译ES6的模块语法,使其能够被正确加载。

  1. 将Vue组件中的导入语句改为使用CommonJS规范的导入方式:
代码语言:txt
复制
const MyClass = require('./myClass.js');

这样,Webpack就能够正确加载Vue组件中导入的*.js类。

总结起来,Webpack不能加载从Vue组件导入的*.js类是因为默认只能处理CommonJS规范的模块导入,可以通过使用babel-loader来处理ES6的模块语法,或者将导入语句改为使用CommonJS规范的导入方式来解决这个问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券