webpack babel 怎么将Object.assign() 转成es5语法

Posted 2023-04-18

参考技术A 习惯了WebStorm的话..我就假设题主会用Node.js和npm啦～
一句话总结：用WebStorm自带的File
Watcher功能+Babel实现自动转换ECMAScript
6代码为ES5代码
我是这么配置的..就先新建一个Empty
Project，然后在src目录下新建了一个main.js；
//
这一步不是必须的
只是刚上手的话
从空项目开始自己配置会少很多干扰
Then..进入设置，把javascript
language
version改成ECMAScript
6；
再Then..写一段ES6代码
'use
strict';
//
node直接运行ES6代码时，如使用了ES6的一些关键字，比如let，就需要严格模式，否则会报错
//
这是没有严格模式时候的错误提示
//
SyntaxError:
Block-scoped
declarations
(let,
const,
function,
class)
not
yet
supported
outside
strict
mode
function*
fibs()
//
Generator
Function
let
a
=
0;
let
b
=
1;
while
(true)

yield
a;
//
[a,
b]
=
[b,
a
+
b];
b
=
a
+
b;
a
=
b
-
a;


let
[first,
second,
third,
fourth,
fifth,
sixth]
=
fibs();
console.log(first,
second,
third,
fourth,
fifth,
sixth);
现在IDE会出现一个File
watcher提示条
先别点Add
watcher！我们要先去装babel～
首先在根目录新建一个package.json

"name":
"test-project",
"version":
"1.0.0"

然后打开IDE的Terminal，安装babel-cli
npm
install
--save-dev
babel-cli
Good!
现在可以去点Add
watcher啦，点完之后会弹出一个框，其中大部分设置IDE都帮你搞定了
下面第三行，Program那一项，填
$ProjectFileDir$/node_modules/.bin/babel
然后点OK，这个时候你就会发现左边多出来一个main-compiled.js文件啦
但是还没搞定！现在只是搞定了自动转换的功能，系统默认把ES6
compile成了ES6..（你应该会发现compile出来的东西跟原来的一样..Generator函数并没有被转换成ES5的格式）
所以我们需要安装Babel的preset以正确识别ES6代码；
和刚才一样，在npm安装babel的ES6的preset
npm
install
--save-dev
babel-preset-es2015
在根目录下新建一个.babelrc文件（就是babel在当前项目的配置文件），写上

"presets":
[
"es2015"
]

OK搞定！保存再回去看一下main-compiled.js
应该就变成这个样子啦，现在你在main.js里直接写ES6代码，IDE都会自动compile成ES5的代码在这里啦～
注意：想直接用Node.js运行ES6代码还是有些问题..因为这段代码用的ES6的解构赋值Node.js还未完全支持，需要在运行的时候加入一些tags（以开启Node.js的相关试验特性），具体可以参考Node.js官网对ES6的说明：ECMAScript
2015
(ES6)。

使用babel和webpack优化项目

前言

组件化、模块化、自动化、工程化是现在考核一前端项目是否为一个优秀项目的标准之一，从而应运而生了一些列前端模块化、工程化的工具库。babel和webpack就是其中的优秀代表，那你了解他们么？你知道如何通过babel和webpack来优化前端项目么？

正文

webpack

webpack是一款前端构建工具，他的主要作用就是将各个具有依赖的模块打包整合在一起生成静态资源。就像官网展示的图片：

module chunk bundle的区别

• module: 各个源码文件，webpack中一切皆模块
• chunk: 多个模块拼接合成的文件，使用entry，import()，splitChunk可以生成chunk
• bundle: 最终输出的文件称为bundle

loader和plugin的区别

• loader: 模块转换器。less=>css
• plugin: 扩展插件

webpack性能优化

基本分为两个方面：

• 优化打包构建速度
• 优化产出代码

优化打包构建速度

优化babel-loader

• 启用缓存 use:['babel-loader?cacheDirectory]
• 合理使用include和exclude

IgnorePlugin: 忽略本地化内容

new Webpack.IgnorePlugin(/\.\/locale/,/moment/),//moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去

// index.js 在文件中需要手动引入当前包内自己所需要的部分
import moment from 'moment'
//手动引入所需要的语言包
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

noParse: 打包时不去解析相关模块中是否还依赖其他包,而这些三方库里面没有其他依赖

module:{
  noParse:/jquery|lodash/,//不去解析jquery、lodash中的依赖库
}

happyPack: 开启多进程打包，提高构建速度。

  // loader
{
  text:/\.js$/,
  use:['happypack/loader?id=babel'],
}
// plugins
new HappyPack({
    id:'babel',
    loaders:[{
      loader: 'babel-loader',
      options:{
        cacheDirectory: true,
      }
    }]
})

parallelUglifyPlugin

• webpack内置了一款Uglify工具压缩js，但是不能开启多进程
• 项目比较大。构建速度缓慢才需要使用多进程，项目简单开启多进程开销太大，可能拖慢打包进程

new ParallelUglifyPlugin({
  uglifyJS:{
    output: {
      beautify: false,  // 紧凑输出
      comments:false, // 删除注释
    },
    compress:{
      drop_console: true,
      collapse_vars: true,  // 内嵌定义了但是只用到一次的变量
      reduce_vars: true, // 提取出出现多次但是没有定义成变量去引用的静态值
    }
  }
}),

自动刷新：watch: true

热更新: HotModuleReplacementPlugin

对于js文件需要手动配置实现热更新。css更改自动实现热更新。

DllPlugin: 动态链接库

• 首先使用webpack.DllPlugin打包出dll.js文件和mainfest.json

entry:{
  vendors:['lodash'],
  react:['react','react-dom'],
},
output:{
  filename:'[name].dll.js',
  path: path.resolve(__dirname,'../dll'),
  library: '[name]',
},
plugins: [
  new webpack.DllPlugin({
    name: '[name]',
    path: path.resolve(__dirname,'../dll/[name].manifest.json')
  })
]

• 接着在npm run dev 时使用webpack.DllReferencePlugin关联文件、使用AddAssetHtmlWebpackPlugin在html添加对dll.js文件的引用

const files = fs.readdirSync(path.resolve(__dirname,'../dll'))
files.forEach(file => {
  if(/.*\.dll.js/.test(file)){
    plugins.push(
      new AddAssetHtmlWebpackPlugin({
        filepath: path.resolve(__dirname, '../dll', file)
      }),
    )
  }
  if(/.*\.manifest.json/.test(file)){
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, '../dll', file)
    })
  }
})

• 不推荐使用在生产环境中

优化产出代码

代码体积更小

• url-loader 产出base64格式的图片
• Tree-Shaking: mode: 'production'
• 只有使用ES Module引用才能实现Tree-Shaking
• Scope Hosting：代码体积更小，创建函数作用域更少，代码可读性更高

  // 针对npm中第三方模块优先采用jsnext:main中指向的ES6 模块化语法的文件
  resolve: ['jsnext:main', 'browser', 'main'],
  
  plugin:{
    // 开启Scope Hosting
    new webpack.optimize.ModuleConcatenationPlugin()
  }
  

合理分包，不重复加载

• 打包出的bundle加Hash，未改变的文件使其能命中缓存
• 提取公共代码：

optimizatoin:{
  splitChunks:{
    chunks: 'all',
    minSize: 20000,
    // minRemainingSize: 0,
    maxSize: 0,
    minChunks: 1,       // 代码被引入了多少次才会代码分隔
    maxAsyncRequests: 6,      // 最多同时 请求数
    maxInitialRequests: 4,      // 最多入口分隔的 请求数
    automaticNameDelimiter: '~',
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  },
}

速度更快，内存使用少

• 使用懒加载 import()
• 使用CDN加速: publicPath:'http://cnd.com'

babel

babel是一款JavaScript的编译器。他负责

• 检查语法是否符合es5语法规范。不符合就转换
• 不处理模块化（webpack处理）

presets

presets是babel中的预设组件。相当于一堆plugin的集合。常见的有

• @babel/preset-env
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

babel-polyfill

• core-js: 将ES6、ES7等代码转换整ES5代码的工具库
• regenerator: 将 generator函数转换为ES5代码的工具库

babel-polyfill就是两者的集合。babel在7.4版本放弃了babel-polyfill推荐用户直接使用core-js或regenerator

如何实现按需引用，在.babelrc文件下

{
  "presets":[
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage", // 按需引用
        "corejs": 3 //core-js 版本
      }
    ]
  ]
}

babel-runtime

babel-polyfill会造成全局污染，runtime就是为了防止全局污染。写第三方库时可以使用。

.babelrc

{
  "plugins":[
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false,
      }
    ]
  ]
}

前端为何要进行打包和构建？

• 体积更小（Tree-Shaking、压缩、合并），加载更快
• 编译高级语言和语法（TS、ES6+、模块化、sass、less）
• 兼容性和语法检查（polyfill、postcss、eslint）
• 统一高校的开发环境
• 统一的构建流程和产出标准
• 集成公司构建规范（提测、上线）