Babel7怎么将需要转译的node_modules下的依赖包做转换呢？

Question

项目没有使用Vue-cli，只使用了webpack+babel。该怎么编译呢？

Answer 1

以下答案参考AI：
如果你使用的是 webpack 和 babel，并且想要将 node_modules 目录下的依赖包进行转译，可以按照以下步骤操作：

1. 首先，确保你已经安装了必要的依赖：

   npm install webpack babel-loader @babel/core @babel/preset-env
   

2. 在项目的根目录下创建一个名为 webpack.config.js 的文件，并添加以下配置：

   module.exports = {
     // 入口文件路径
     entry: './src/index.js',
     output: {
       // 输出文件路径
       filename: 'bundle.js',
     },
     module: {
       rules: [
         {
           // 使用 babel-loader 处理 js 文件
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env'],
             },
           },
         },
       ],
     },
   };
   

   这个配置文件告诉 webpack 使用 babel-loader 来处理除了 node_modules 目录下的所有 JavaScript 文件，并使用 @babel/preset-env 进行转译。

3. 在项目根目录下创建一个名为 .babelrc 的文件，并添加以下内容：

   {
     "presets": ["@babel/preset-env"]
   }
   

   这个文件用于指定 babel 的配置选项，这里我们只使用了 @babel/preset-env。

4. 在项目根目录下执行 webpack 命令，这将启动 webpack 编译过程。编译完成后，生成的转译后的代码将输出到 dist/bundle.js 文件。

通过以上步骤，webpack 将会对除了 node_modules 目录下的 JavaScript 文件进行转译，并将转译后的代码打包到 bundle.js 文件中。这样你就可以确保项目中的依赖包也被正确转译并使用了 Babel 进行兼容处理。