工程化: babel的一些常见问题

摘要…

系列文章：

一、语法问题

待补充…

二、构建编译问题

1.对 `node_modules` 目录中的文件，如何进行处理?

场景: Vue CLI

问题描述：Module parse failed: Unexpected token
使用Vue CLI构建时，当你需要对 node_modules 目录中的文件进行处理 ，可以在 vue.config.js 文件中使用 chainWebpack 方法，自定义Webpack配置。

需要将以下Webpack配置转换为Vue CLI配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}

如何解决：

确保安装必要的依赖

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

在项目根目录下，创建或更新 .babelrc 文件

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

在项目根目录下，创建或更新 vue.config.js 文件，以包含以下配置：

module.exports = {
  chainWebpack: config => {
    // 为 .js 文件添加 babel-loader，并排除 node_modules
    config.module
      .rule('js')
      .test(/\.js$/)
      .exclude
        .add(filepath => {
          // 排除 node_modules 中的其他文件，但包括指定的路径
          return /node_modules/.test(filepath) && !/node_modules[\\/]@lianpf[\\/]native-sdk/.test(filepath);
        })
        .end()
      .use('babel-loader')
        .loader('babel-loader')
        .options({
          presets: ['@babel/preset-env'],
        })
        .end();

    // 处理 node_modules 中的特定文件
    config.module
      .rule('js-in-node_modules')
      .test(/\.js$/)
      .include
        .add(/node_modules[\\/]@lianpf[\\/]native-sdk/)
        .end()
      .use('babel-loader')
        .loader('babel-loader')
        .options({
          presets: ['@babel/preset-env'],
        })
        .end();
  }
};

1. 完成上述配置后，重启：
```
npm run serve
```

结论：

通过以上配置，我们确保 Babel 处理 node_modules/@lianpf/native-sdk 目录下的文件，从而支持现代 JavaScript 语法（如可选链 ?.）。如果仍然遇到问题，请确保所有依赖项已正确安装，并且没有拼写或语法错误。

参考

最后，希望大家早日实现：成为编程高手的伟大梦想！
欢迎交流~

本文版权归原作者曜灵所有！未经允许，严禁转载！对非法转载者, 原作者保留采用法律手段追究的权利！
若需转载，请联系微信公众号：连先生有猫病，可获取作者联系方式！

一、语法问题#

二、构建编译问题#

1.对 node_modules 目录中的文件，如何进行处理?#

参考#

一、语法问题

二、构建编译问题

1.对 `node_modules` 目录中的文件，如何进行处理?

参考