前言

在使用babel和webpack之前，需要先下载node.js

babel

babel 准备工作

初始化项目

npm init

生成package.json

2.安装 babel 需要的包

npm install --save-dev xxx xxx

xxx 代表需要下载的包，这里可以这样写

npm install --save-dev @babel/core @babel/cli

删除的话就是这样

npm uninstall xxx xxx --save-dev

3.运行 babel

npx babel --version

输出版本号说明安装成功了

babel 使用

1.将你需要转译的js放在一个文件夹里，然后转译，在终端输入

babel 自己的js文件夹名 -d 转译后的js文件夹名

转译后的文件夹不需要自己创建，会自动生成，我们可以在package.json中的scripts添加上

"src": "babel 自己的js文件夹名 -d 转译后的js文件夹名"

然后再转译的话，就在终端输入

npm run src

src 是自定义的，你可以通过自己想法去更改

2.在你src文件夹的同一层创建.babelrc

配置你的babel

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

@babel/preset-env是你下载的转译工具，在package.json中可以看到你下载了多少工具

3.目前发现的bug及解决方法

export 转译后不能被浏览器读懂的问题，在终端下载

npm install --save-dev @babel/plugin-transform-modules-umd

class类中的static不能转译的问题，在终端下载

npm install --save-dev @babel/plugin-proposal-class-properties

webpack

webpack 准备工作

1.初始化项目

npm init

2.安装cli工具 webpack 库

npm i --save-dev webpack webpack-cli

3.测试运行webpack

局部安装

npx webpack --version

全局安装

webpack --version

推荐局部安装，因为有版本的不一样，全局会把局部的覆盖

webpack 使用

因为准备工作做好了，那么就会有以下的项目

webpack.config.js是配置webpack的，需要自己创建，除了index.html其他文件都放在src里，那么现在就可以来编译你的项目了，在终端输入

npx webpack --version

成功后就是这样的

src是编译前的代码，dist是编译后的代码

consfig如何配置？

// 运行webpack 命令时
// 命令 会自动帮我们运行 webpack.config.js
// 总结：所有的命令都有配置文件，命令在执行时，先执行配置文件，然后根据配置文件的具体配置参数完成任务

// __dirname 当前运行文件  所在的路径 绝对路径  
// path 作用，处理文件路径的，不负责查找文件
const path = require('path')
console.log(__dirname);
// path.resolve(a,b) 将相对路径变为绝对路径  可以接收n个参数
// console.log(path.resolve('./a.js'));

module.exports = {
    mode:'development',          // mode 模式  development    none
    entry:'./src/index.js',      // 配置入口文件
    output:{                     // 配置出口文件
        path:path.resolve(__dirname,'dist'),  // 打包后输出的文件名
        filename:'bundle.js'  // 打包后的文件名
    }
}

babel与webpack 入门到精通

前言