笔记大全

PHP开发使用 Babel 和 Webpack 进行 ES6 语法转换和模块打包

更新时间：2023-11-07

什么是Babel和Webpack？

Babel 和 Webpack 都是 JavaScript 开发中受欢迎的工具，其中 Babel 是一个 JavaScript 编译器，可以将ES6+代码编译为ES5以实现跨浏览器兼容性；而 Webpack 是一个模块打包工具，用于将多个 JavaScript 文件打包成一个或多个文件以减少页面请求。使用Babel和Webpack的组合可以大大简化前端开发中的工作量和复杂度，提高代码质量和可维护性。


//Babel转换
//ES6
const arr = [1, 2, 3];
const newArr = arr.map(item => item + 1);
console.log(newArr);
//转换后
var arr = [1, 2, 3];
var newArr = arr.map(function (item) {
  return item + 1;
});
console.log(newArr);


//Webpack打包
//index.js
import {sum} from './sum';
import {difference} from './difference';
console.log(sum(1,2));
console.log(difference(2,1));
//sum.js
export const sum = (a, b) => a + b;
//difference.js
export const difference = (a, b) => a - b;

//Webpack配置
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
      }
    ]
  }
};

如何在项目中使用Babel和Webpack？

在创建项目时，可以使用一些工具如create-react-app等来自动生成一些基础的Babel和Webpack配置文件，也可以手动创建并配置。手动配置的步骤包括：安装Webpack和相关loader，创建Webpack配置文件webpack.config.js，安装Babel和相关插件，创建Babel配置文件.babelrc，配置Webpack中的loader来使用Babel进行ES6+代码转换。


//webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
      }
    ]
  }
};

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

Babel的使用和配置

Babel可以通过一些插件和预设来转换代码，预设包含了多个插件，方便一次性引入多个常用的插件配置。为了防止未来添加的ES9+语法未被转换，可以使用@babel/polyfill来引入ES9+语法的转换。同时，也可以通过配置Babel，使其只在特定情况下才进行转换，例如只转换业务代码，而不转换node_modules中的库代码。


//使用Babel插件和配置
//.babelrc
{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}

//使用@babel/polyfill
import '@babel/polyfill';

Webpack的使用和优化

在使用Webpack时，可以通过配置entry和output来指定唯一入口和输出文件，通过配置module来使用各种loader进行文件转换和处理。同时，也可以使用插件对打包进行扩展，如HtmlWebpackPlugin用于自动生成HTML文件，CleanWebpackPlugin用于删除打包dist目录中的旧文件等。为了提高Webpack的打包速度，可以通过以下手段进行优化：

使用DllPlugin和DllReferencePlugin来将第三方库代码单独打包
使用HappyPack并开启如下配置来开启多线程编译：{ id: 'babel', loaders: ['babel-loader'] }
使用webpack-parallel-uglify-plugin来开启多进程压缩JS代码


//开启HappyPack，多线程编译
//webpack.config.js
const HappyPack = require('happypack');
module.exports = {
  //...
  module: {
    rules: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "happypack/loader?id=babel" 
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'babel',
      loaders: ['babel-loader']
    })
  ]
};

//使用DllPlugins，单独打包React、React-dom等库代码
//webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
  entry: {
    vendor: ['react', 'react-dom']
  },
  output: {
    filename: '[name].[hash].dll.js',
    path: path.resolve(__dirname, 'dist'),
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.resolve(__dirname, 'dist/[name]-manifest.json')
    })
  ]
};
//其他配置参考webpack官方文档即可

c语言编程笔录