你对项目里的依赖包了解吗

发布时间:2019-08-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了你对项目里的依赖包了解吗脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

注意:本文所有依赖包是目前最新版本的

现在很多开发朋友对于使用webapckbabel搭建开发环境已经不陌生,但很少去系统性的了解项目依赖。

本文从环境依赖包说起,让你对自己的开发环境有更深的了解。

为了简单,我们将依赖分个类:Babel相关????Webpack相关????可选的依赖包
注意:带???? 是指必需的依赖, 下面我们一个一个来说。

Babel相关????

要使用最新的ES6+语法,必须少不了Babel转码,那么要搭建一个完全体的环境,应该使用哪些依赖呢?

首先,我们安装最核心的依赖: @babel/cli@babel/core@babel/polyfill@babel/registercore-js

下面是他们的一些简单解释:

{   
    /*
    Babel 自带了一个内置的 CLI 命令行工具,可通过命令行编译文件。
    */
    "@babel/cli": "^7.4.3", 
    /*
    看到`core`就知道它是`babel`的核心,一些转码操作都是基于它完成的,
    所以它是必须的依赖。
    */
    "@babel/core": "^7.4.3",
    /*
    Babel默认只转换新的JavaScript语法,但是不转换新的API,比如 
    `ITerator`、`Generator`、`Set`、`Maps`、`Proxy`、`Reflect`、
    `Symbol`、`Promise` 等全局对象,以及一些定义在全局对象上的方法(比
    如 `Object.assign` )都不会转码。而`@babel/polyfill`就可以做到。
    */
    "@babel/polyfill": "^7.4.3",

    /*
    让webpack.config.babel.js也支持ES6语法
    */
    "@babel/register": "^7.4.0",
   
    /*
    通俗说就是动态polyfill,它可以动态加载需要的新API,具体可以看https://github.COM/zloirock/core-js#readme
    */
    "core-js": "3",
   
  }

下面我们安装必需的preset和plugin@babel/preset-env@babel/plugin-PRoposal-class-proPErties@babel/plugin-proposal-decorators@babel/plugin-proposal-object-rest-spread@babel/plugin-syntax-dynamic-import

下面是它们的一些解释:

{
    /*
    根据指定环境来转码,这个不用说,必装
    */
    "@babel/preset-env": "^7.4.3",
    
    /*
    对class中属性初始化语法、static等语法进行处理
    */
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    
    /*
    装饰器语法处理
    */
    "@babel/plugin-proposal-decorators": "^7.4.0",
    
    /*
    对象rest、spread语法处理
    */
    "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
    
    /*
    import()语法处理
    */
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
}

安装好了以上preset和plugins,我们需要新建一个.babelrc文件来使用它们:

{
  "presets": [
    [
      "@babel/env",
      {
        "useBuiltIns": "usage",
        //如果useBuiltIns选项为usage,则要申明corejs的版本,这也是为什么要安装core-js的原因
        "corejs": "3", 
        "loose": true
      }
    ],
    "@babel/typescript", //如果你的环境有typescript,记得安装它
    "@babel/react" //如果你使用了react,也要记得安装哦
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/proposal-class-properties",
      {
        "loose": true
      }
    ],

    "@babel/proposal-object-rest-spread",
    "@babel/plugin-syntax-dynamic-import"
  ]
}

以上我们对于ES6+最新语法的转码已经完全没有问题了,下面我们开始说说Webpack有哪些必需要安装的依赖

Webpack相关????

上面的Babel转码已经配置完成。但我们要使用它们,还要依靠webpack来告诉我们需要转码的项目入口以及在转码过程中需要的配置(比如loader)。

既然需要webpack,那么我们安装webapck以及它必需的依赖包:webpackwebpack-cliwebpack-dev-serverbabel-loaderhtML-webpack-plugin

安装完成后我们新建webpack.config.babel.js,然后我们来配置一下:

import webpack From 'webpack';
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';

export default {
  mode: 'development',
  entry: {
    app: path.resolve(__dirname, '../src/index.tsx')
  },
  devtool: 'cheap-module-source-map',
  output: {
    path: path.resolve(__dirname, '../build'),
    filename: 'bundle-[name]-[hash].js',
    chunkFilename: 'chunk-[name]-[hash].js'
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.less', '.json'],
    modules: ['node_modules']
  },
  module: {
    rules: [
      {
        test: /.(ts|js)x?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters: {
        title: 'test'
      }
    })
    
  ],
  devServer: {
    port: @H_771_304@8080,
    host: 'localhost',
    disableHostCheck: true
  }
};

细心的人看出来,上面的配置用的是ES6的写法,要做到这点需要满足:

  1. 文件名称必须是webpack.config.babel.js
  2. 需要安装@babel/register 这个我们前面已经安装了

tips: 这里我使用的是ejs作为html的模板。

到这里,必需的依赖包已经安装完成了,下面的可选依赖是根据大家项目的具体情况去安装,比如样式、图片、字体、css压缩配置等等...

这里我推荐几个好用的依赖包:

{
    /*
       将CSS提取为独立的文件的插件,对每个包含css的js文件都会创建一个CSS文件,支持按需加载css和sourceMap
    */
    "mini-css-extract-plugin": "^0.6.0",
    /*
       css压缩
    */
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    
    /*
        对打包的js进行压缩处理的webapck插件
    */
    "terser-webpack-plugin": "^1.2.3",

     /*
        多进程处理打包,加快打包速度
    */
    "thread-loader": "^2.1.2",
    
    /*
        webpack打包进度条
    */
    "webpackbar": "^3.2.0"

}

至于webpack里的各种loader,大家根据自己的项目去安装吧。

就说到这里啦,如果你有好用的npm包,欢迎推荐~

脚本宝典总结

以上是脚本宝典为你收集整理的你对项目里的依赖包了解吗全部内容,希望文章能够帮你解决你对项目里的依赖包了解吗所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。