配置Babel编译Vue组件拆分出的外部JS文件

我来帮你搞定这个需求，让拆分出来的Vue组件JS文件能被Babel立即编译，而不是留到运行时处理。下面分情况给你具体的配置步骤：

情况1：使用Vue CLI搭建的项目（最常见） #

Vue CLI已经帮我们封装了大部分配置，只需要确保以下几点：

1. 检查Babel基础配置
   项目根目录的babel.config.js（或.babelrc）要包含Vue官方的Babel预设，这样才能正确处理Vue组件的语法：

   module.exports = {
     presets: [
       '@vue/cli-plugin-babel/preset'
     ]
   }
   

   这个预设已经集成了@babel/preset-env和Vue语法支持，完全能覆盖你的需求。

2. 确保JS文件在编译范围内
   默认情况下，Vue CLI会自动编译src目录下所有.js文件。如果你的some-page.js和.vue文件同目录（比如都在src/components下），那已经会被Babel处理了。
   如果你的JS文件在src外的自定义目录，需要在babel.config.js里添加include字段指定路径：

   module.exports = {
     presets: [
       '@vue/cli-plugin-babel/preset'
     ],
     include: [
       './src/**/*.js',
       './your-custom-folder/**/*.js' // 替换成你的实际文件路径
     ]
   }
   

3. 验证配置生效
   在some-page.js里写一段ES6+语法（比如const foo = obj?.bar），然后执行npm run build，打开dist目录下编译后的JS文件，看看这段代码是否被转译为ES5兼容的语法——如果是，说明配置成功了。

情况2：手动配置Webpack的项目 #

如果是自己搭的Webpack环境，需要手动添加Babel处理规则：

1. 安装依赖
   先确保安装了必要的包：

   npm install babel-loader @babel/core @babel/preset-env @vue/babel-preset-app vue-loader vue-template-compiler --save-dev
   

2. 修改Webpack配置文件
   在webpack.config.js里添加.js文件的Babel处理规则，同时保留Vue文件的处理规则：

   const VueLoaderPlugin = require('vue-loader/lib/plugin');
   
   module.exports = {
     module: {
       rules: [
         // 处理JS文件
         {
           test: /\.js$/,
           exclude: /node_modules/, // 排除node_modules，提升编译速度
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env', '@vue/babel-preset-app']
             }
           }
         },
         // 处理Vue文件
         {
           test: /\.vue$/,
           loader: 'vue-loader',
           options: {
             compilerOptions: {
               preserveWhitespace: false
             }
           }
         }
       ]
     },
     plugins: [
       new VueLoaderPlugin() // 必须引入这个插件才能让vue-loader正常工作
     ]
   }
   

3. 验证配置
   和上面一样，用ES6+语法测试编译结果，确认Babel已经处理了你的外部JS文件。

额外注意事项 #

• 你的.vue文件里的<script>标签用type="text/javascript"完全没问题，不需要改成type="module"（Vue CLI/Webpack默认支持ES模块）。
• 如果是Vue 3项目，@vue/cli-plugin-babel/preset已经支持Vue 3的语法，不需要额外调整。

内容的提问来源于stack exchange，提问作者sazr