引言

在现代前端开发中，Vue CLI作为一个强大的项目脚手架工具，为我们提供了快速搭建项目、编译和打包的功能。然而，在实际开发过程中，我们经常会遇到需要编译node_modules中的JavaScript代码的情况。本文将深入探讨Vue CLI如何编译JavaScript，并提供一些实战技巧。

Vue CLI编译JavaScript的基本原理

Vue CLI通过vue-loader来编译.vue文件中的JavaScript代码。vue-loader会将这些代码转换成内联loader的格式，并使用Babel进行处理。对于CSS代码，vue-loader会将其转换成import语句，以便浏览器能够正确解析。

Node_modules中的JavaScript代码编译

Vue CLI默认情况下不会对node_modules中的JavaScript代码进行编译。这是因为Vue CLI的配置文件中明确指出，只对.vue文件使用vue-loader进行编译。那么，如果我们需要编译node_modules中的代码，应该如何处理呢？

方案一：使用transpileDependencies配置

在vue.config.js文件中，我们可以使用transpileDependencies配置来指定需要编译的依赖包。例如：

module.exports = {
  transpileDependencies: [
    'quill',
    'monaco-editor'
  ]
}

这样，Vue CLI就会对quill和monaco-editor这两个依赖包中的JavaScript代码进行编译。

方案二：使用Babel-loader直接编译

如果我们需要对多个依赖包进行编译，可以使用Babel-loader直接进行编译。在vue.config.js文件中，可以通过链式调用chainWebpack来实现：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('monaco-editor-babel-loader')
      .test(/(monaco-editor[\/].*\.js$)|(quill[\/].*\.js$)/)
      .pre()
      .use('babel-loader')
      .loader('babel-loader')
      .end();
  }
}

这样，Babel-loader就会对匹配到的JavaScript代码进行编译。

控制Babel-loader打包的版本

为了确保代码在不同浏览器中的兼容性，我们需要在.browserslistrc文件或package.json中配置browserslist。例如：

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "chrome >= 78"
  ]
}

这样，Babel-loader就会根据配置的浏览器版本进行代码编译。

结语

通过以上方法，我们可以灵活地控制Vue CLI对JavaScript代码的编译过程。无论是node_modules中的依赖包，还是第三方库的高级语法，都可以通过配置来实现编译。希望本文能为大家提供一些有价值的参考和实战技巧。