vue-cli编译js的一些思考

1. vue-cli如何编译js

vue-cli使用vue-loader编译vue文件，vue文件中存在的js代码有<script>引入和import xx.js形式引入的。

看看vue-loader里的说明：

这两种形式都会被转化成内联loader的格式，使用babel-loader进行处理。

(关于css的代码，会变编译成 import style-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss进行处理)

2.那node_modules中的js代码如何编译呢

执行vue inspect看看vue-cli的默认webpack配置

可以看到它只对.vue文件使用vue-loader进行了编译,并没有对.js后缀的内容做相关处理

并且vue-cli的相关配置中也有提到，vue-cli默认是不会对node-modules中的依赖进行编译的

那么如果想编译node-modules中的代码改如何处理呢（必进想quill,monaco-editor这种npm里直接使用高级语法且不编译的包也是有的）。

方案1：就是截图中的transpileDependencies配置，可以在vue.config.js中使用

transpileDependencies: ture | 正则表达式

方案2： 也可以在vue.config的链式调用中使用babel-loader直接编译

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

3. 怎么控制bebel-loader打包的版本

可以在.browserslistrc文件或者package.json中增加browserslist配置（两者会冲突）

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]

以上是vue-cli的默认配置。可以感觉浏览器的版本调整产物的代码。

如果想处理?.逻辑，可以在can i use上查看其对应的浏览器版本，发现chrome>=79支持这个功能。

这时候，可以将配置改为:

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

便可以将?.进行编译了