精华内容
下载资源
问答
  • 原文:...编译ES6 7 webpack 4.x | babel-loader 8.x | babel 7.x npm install -D babel-loader @babel/core @babel/preset-env webpack webpack 4.x | babel-lo...

    原文:https://blog.csdn.net/wulala_hei/article/details/84768071

    编译ES6 7
    webpack 4.x | babel-loader 8.x | babel 7.x
    npm install -D babel-loader @babel/core @babel/preset-env webpack

    webpack 4.x | babel-loader 7.x | babel 6.x
    npm install -D babel-loader@7 babel-core babel-preset-env webpack

    如果 babel-loader 是 8.0.0 之后的版本,需要安装指定版本的 @babel/core 与 @babel/preset-env

    在配置文件中,涉及的配置项使用,也需要改为 @babel/preset-env这种形式的

    需要安装的 loader babel-loader

    安装最新版的 npm install babel-loader
    一般安装 npm install --save-dev babel-loader babel-core
    新建一个文件夹 demo,进入 cd demo ,然后初始化一下 npm init -y,完成后文件夹内会多一个 package.json和 package-lock.json 的配置文件。

    安装需要的 loader 按上述命令安装即可。

    安装完成后,在项目目录内创建 app.js index.html webpack.config.js

    编辑 webpack.config.js 配置文件,增加入口 entry 与出口 output

    module.exports = {
    entry: {
    app: ‘./app.js’
    },
    output: {
    filename: ‘[name].[hash:5].js’
    },
    module: {
    rules: [
    {
    test: /.js$/,
    use: ‘babel-loader’,
    exclude:’/node_modules/’
    }
    ]
    }
    }

    此时还需要一个 babel-presets 规范的插件

    npm install @babel/preset-env --save-dev 如果 babel-loader 是安装的8.x版本,就使用这一句。
    npm install babel-preset-env --save-dev 如果babel-loader 是安装的7.x,就使用这一句。
    安装完成后,我们需要给我们安装的 loader 指定一个 preset 。

    修改 use

    use: {
    loader: ‘babel-loader’,
    options: {
    presets: [
    [’@babel/preset-env’, {
    targets: {
    browsers: [’> 1%’, ‘last 2 versions’]
    }
    }]
    ]
    }
    },

    在 app.js 文件中添加一些东西,来打包编译一下。

    let func = () => { }
    const NUM = 45
    let arr = [1, 2, 4]
    let arrB = arr.map(item => item * 2)

    console.log(‘new Set(arrB)’, new Set(arrB));

    运行 webpack 打包成功

    PS D:\test\my-webpack\3-3> webpack
    Hash: c51e1f6c979a6f1f782b
    Version: webpack 3.10.0
    Time: 565ms
    Asset Size Chunks Chunk Names
    app.c51e1.js 2.68 kB 0 [emitted] app
    [0] ./app.js 186 bytes {0} [built]

    但是此时我们观察一下打包好的文件,发现有些还是没有转换。只能针对语法进行了转换,而针对低版本浏览器没有的函数和方法是没有转换的,所以还需要两个插件。

    Babel Polyfill
    全局垫片,引入之后会在全局进行变量定义,可以理解为会污染全局变量。为开发应用准备的插件。
    使用方法:
    npm install @babel/polyfill --save

    Babel Runtime Transform
    局部垫片,为了开发框架而准备的,不会污染全局。
    使用方法:
    npm install @babel/plugin-transform-runtime --save-dev

    npm install @babel/runtime --save

    这里把上述的插件都安装上

    npm install @babel/polyfill @babel/runtime --save

    npm install @babel/plugin-transform-runtime --save-dev

    使用 @babel/polyfill 时,在 app.js (入口文件)中 import @babel/polyfill
    这时再打包文件,会发现文件非常大,那我们使用一下 @babel/runtime

    使用 @babel/runtime 时,在根目录 新建 .babelrc 文件 用来配置。

    把 webapck.config.js文件 module 中的 presets 移动到 .babelrc 文件中。
    再增加一个 plugins , 把刚刚安装的 @babel/plugin-transform-runtime 配置上。
    {
    “presets”: [
    ["@babel/preset-env",
    {
    “targets”: {
    “browsers”: ["> 1%", “last 2 versions”]
    }
    }
    ]
    ],
    “plugins”: [
    “@babel/plugin-transform-runtime”
    ]
    }

    运行 webpack 打包成功

    PS D:\test\my-webpack\3-3> webpack
    Hash: 04b45de1843b1e27155f
    Version: webpack 3.10.0
    Time: 1627ms
    Asset Size Chunks Chunk Names
    app.04b45.js 73.2 kB 0 [emitted] app
    [60] ./app.js 386 bytes {0} [built]
    + 121 hidden modules

    展开全文
  • [Webpack][ES6][Babel]_編譯#05._安裝與設定Webpack,_利用babel_loader編譯成ES5程
  • 根据官网https://www.npmjs.com/package/babel-loader要...第1套包:npm i babel-core babel-loader@7 babel-plugin-transform-runtime –D(千万记得是babel-loader@7,不是其他的) 第2套包:npm I babel-preset-env...

    根据官网https://www.npmjs.com/package/babel-loader要对应版本

    一、babel7.X版本
      1.要安装的包

    第1套包:npm i babel-core babel-loader@7 babel-plugin-transform-runtime –D(千万记得是babel-loader@7,不是其他的)

    第2套包:npm I babel-preset-env babel-preset-stage-0 –D(注意是-零,不是字母o)

    这里babel-loader一定要加版本号7,否则下载的将是最新版本8

    2.webpack.config.js配置文件中,rules节点的配置写法

    { test: /.js$/, use: ‘babel-loader’,exclude:/node_modules/},

    注意:

    ①虽然是2套包,但对于loader来说只有一个,所以urse属性只有一个loader。

    ②exclude是排除的意思。这个属性的意思就是不要去匹配node_modules目录中的文件。

    ③node_modules中的文件都已经是现成的包了,人家都打包好了,不需要我们再去打包。

    ④而且该目录中代码文件太多,排除掉它,也能提高很高的打包性能

    3.配置.babelrc文件

    {

    “presets” : [“env”, “stage-0”],

    “plugins” : [“transform-runtime”]

    }

    注意:

    ①"presets"是用来配置处理“语法”的项。这2套包中,带有preset的包是babel-preset-env 和 babel-preset-stage-0 ,他们的名字分别是env/stage-0,前边的babel-preset是前缀。

    ②"plugins"是用来配置插件的项。这2套包中,只有babel-plugin-transform-runtime是插件,并且该插件的名字是“transform-runtime”

    二、使用babel8.X版本  
      先从大体上介绍一下babel8的变化点。

    第一,各个包的名字变了,都以@符号开头。这个变化带来2个影响。其一,以前每个包在node_modules目录下都是一个独立的文件夹;现在则在node-modules目录下有个叫“@babel”的目录,这里要安装的所有babel包,都在这个@babel目录下保存。其二,在配置的时候,写法完全变了。

    第二,有一些包被彻底废弃。比如在babel7.X版本中用到的babel-preset-stage-0

    第三,有一些新的包必须引入进来才可以。

    具体用法如下:

    1.必须安装的包如下:

    需要注意的是,这些@开头的包,在实用npm安装时,包名必须用引号引住,否则npm会把它当做不可识别的字符。例如:

    npm i babel-loader ‘@babel/core’ -D

    babel-loader没有@符号,所以不需要引号包住;@babel/core则需要用引号包住。其他以此类推

    这里小版本号就不要计较了,只要大版本号能对上就都一样。

    2.各个包的作用如下

    babel-loader:加载器
    @babel/core:babel核心包,babel-loader的核心依赖
    @babel/preset-env:ES语法分析包
    @babel/runtime和@babel/plugin-transform-runtime:babel 编译时只转换语法,几乎可以编译所有时新的 JavaScript 语法,但并不会转化BOM(浏览器)里面不兼容的API。比如 Promise,Set,Symbol,Array.from,async 等等的一些API。这2个包就是来搞定这些api的。
    @babel/plugin-proposal-class-properties:用来解析类的属性的。
      3.配置webpack.config.js。由于“babel-lodaer”包名字没变,api写法也没变,还是那么写

    { test: /.js$/, use: ‘babel-loader’, exclude: /node_modules/},//处理高级ES语法的babel_lodaer

    4.添加.babelrc配置文件,并在该文件中写下如下配置信息

    {

       "presets": ["@babel/preset-env"],
    

    “plugins”: ["@babel/plugin-transform-runtime", “@babel/plugin-proposal-class-properties”]

    }

    参考:https://www.cnblogs.com/ldq678/p/10448374.html但是原文有错,可以对比一下

    https://www.cnblogs.com/soyxiaobi/p/9554565.html

    展开全文
  • babelbabel-loader

    2020-08-11 19:14:31
    babel 概述 Babel 是一个 JavaScript 编译器,它是一个工具链,主要的用途就是在旧的浏览器或环境中将ECMAScript 2015+ 代码转换为向后兼容的 js 代码。 案例分析 //demo a.js [1,2,3].map(item => item+20) ...

    babel 概述

    Babel 是一个 JavaScript 编译器,它是一个工具链,主要的用途就是在旧的浏览器或环境中将ECMAScript 2015+ 代码转换为向后兼容的 js 代码。

    案例分析

    //demo  a.js
    [1,2,3].map(item => item+20)
    

    官方给的是@babel/cli,其内部包含调用了@babel/node

    @babel/core 提供的是基础 api

    我们采用工具 @babel/cli 将包含es6语法的 a.js 文件转成 es5 代码的b.js。

    • 首先 npm init 创建 package.json 文件

    • 然后下载@babel/cli @babel/core npm install -D @babel/cli @babel/core

    • npx babel a.js -o b.js

    执行后的 b.js 中的代码除了有一些格式化之外和原本代码并没有什么变化,主要是没有任何的预设(presets)和插件(plugins)转换。

    所有我们在项目根目录下建一个 .babelrc 文件:

    {
    	"presets":["@flowio/babel-preset-flowio"],
    	"plugins":[]
    }
    //ps 单独下载 npm i -D @flowio/babel-preset-flowio
    
    

    目前 babel 版本现在更新到了7 ,旧的 babel-preset-es2015 已经淘汰。

    执行 npx babel a.js -o b.js,转换后的代码如下:

    //b.js
    "use strict";
    [1, 2, 3].map(function (item) {
      return item + 10;
    });
    

    babel-loader概述

    在 webpack 中babel-loader的配置项:

    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
    

    babel-loader 的作用是相对于一个交通指挥, 只是在webpack打包时遇到js文件,交给babel处理,至于怎么处理,跟webpack就没有关系了,跟 babel 的配置有关。

    展开全文
  • babel-loader7和babel8版本的问题 根据官网https://www.npmjs.com/package/babel-loader要对应版本 一、babel7.X版本  1.要安装的包  第1套包:npm i babel-corebabel-loader@7babel-plugin-transform-...

    babel-loader7和babel8版本的问题

    根据官网https://www.npmjs.com/package/babel-loader要对应版本

    一、babel7.X版本

      1.要安装的包

       第1套包:npm i babel-core babel-loader@7 babel-plugin-transform-runtime –D(千万记得是babel-loader@7,不是其他的)

         第2套包:npm I babel-preset-env babel-preset-stage-0 –D(注意是-零,不是字母o)  

       这里babel-loader一定要加版本号7,否则下载的将是最新版本8

      2.webpack.config.js配置文件中,rules节点的配置写法  

      { test: /\.js$/, use: 'babel-loader',exclude:/node_modules/},

      注意:

        ①虽然是2套包,但对于loader来说只有一个,所以urse属性只有一个loader。

        ②exclude是排除的意思。这个属性的意思就是不要去匹配node_modules目录中的文件。

        ③node_modules中的文件都已经是现成的包了,人家都打包好了,不需要我们再去打包。

        ④而且该目录中代码文件太多,排除掉它,也能提高很高的打包性能

      3.配置.babelrc文件  

        {

        “presets” : [“env”, “stage-0”],

        “plugins” : [“transform-runtime”]

        }

      注意:

        ①"presets"是用来配置处理“语法”的项。这2套包中,带有preset的包是babel-preset-env 和 babel-preset-stage-0 ,他们的名字分别是env/stage-0,前边的babel-preset是前缀。

        ②"plugins"是用来配置插件的项。这2套包中,只有babel-plugin-transform-runtime是插件,并且该插件的名字是“transform-runtime”

      二、使用babel8.X版本  

      先从大体上介绍一下babel8的变化点。

        第一,各个包的名字变了,都以@符号开头。这个变化带来2个影响。其一,以前每个包在node_modules目录下都是一个独立的文件夹;现在则在node-modules目录下有个叫“@babel”的目录,这里要安装的所有babel包,都在这个@babel目录下保存。其二,在配置的时候,写法完全变了。

        第二,有一些包被彻底废弃。比如在babel7.X版本中用到的babel-preset-stage-0

        第三,有一些新的包必须引入进来才可以。

      具体用法如下:

      1.必须安装的包如下:

      

       需要注意的是,这些@开头的包,在实用npm安装时,包名必须用引号引住,否则npm会把它当做不可识别的字符。例如:

      npm i babel-loader '@babel/core' -D

      babel-loader没有@符号,所以不需要引号包住;@babel/core则需要用引号包住。其他以此类推

      这里小版本号就不要计较了,只要大版本号能对上就都一样。

      2.各个包的作用如下   

    • babel-loader:加载器
    • @babel/core:babel核心包,babel-loader的核心依赖
    • @babel/preset-env:ES语法分析包
    • @babel/runtime和@babel/plugin-transform-runtime:babel 编译时只转换语法,几乎可以编译所有时新的 JavaScript 语法,但并不会转化BOM(浏览器)里面不兼容的API。比如 Promise,Set,Symbol,Array.from,async 等等的一些API。这2个包就是来搞定这些api的。
    • @babel/plugin-proposal-class-properties:用来解析类的属性的。

      3.配置webpack.config.js。由于“babel-lodaer”包名字没变,api写法也没变,还是那么写   

      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},//处理高级ES语法的babel_lodaer

       4.添加.babelrc配置文件,并在该文件中写下如下配置信息   

        {

           "presets": ["@babel/preset-env"],

          "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]

        }

    参考:https://www.cnblogs.com/ldq678/p/10448374.html但是原文有错,可以对比一下

    https://www.cnblogs.com/soyxiaobi/p/9554565.html

    展开全文
  • 这个问题是本人在配置babel-loader之后,试图通过npm run dev命令打开主页面引起的。 两种解决方案: 第一种:均降低版本(本人使用的第一种方法解决的问题) npm install babel-loader@7 babel-core babel-...
  • react-app-rewire-babel-loader 使用在您的项目中 loader。 假设您在npm上找到了一个很棒的库,想要在未弹出的项目中使用它,但是不幸的是,它在ES6 +中发布(因为node_modules不会通过babel-loader进行传递),...
  • 实现webpack的babel-loader

    2020-02-28 22:26:27
    实现babel-loader babel-loader: let babel = require('@babel/core'); let loaderUtils = require('loader-utils'); function loader(source) { // this loaderContext let options = loaderUtils.getOption...
  • Vue babel-loader

    2021-05-24 20:25:43
    babel-loaderbabel其实是一个编译JavaScript的平台,它可以编译代码帮你达到以下目的: 1、bable能做什么? ES6、ES7…转ES5; 让你能使用基于JavaScript进行扩展的语言,比如React的JSX; 2、babel-loader依赖...
  • babel-loader配置

    2017-07-04 13:31:00
    babel-loader配置(利用babel-loader等包实现es6转es5语法) 安装 npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev npm 从npm@3之后不赞成自动安装...
  • [坑003]babel-loaderbabel-core安装问题

    万次阅读 2018-10-04 18:12:36
    0x00错误描述 ...babel-loaderbabel-core版本不对应所产生的, babel-loader 8.x对应babel-core 7.x babel-loader 7.x对应babel-core 6.x 刚一开始我一看到cannot find module,第一条件反射就认为我自...
  • babel-loaderbabel-core安装问题

    千次阅读 2019-05-12 07:41:59
    0x00错误描述 ...babel-loaderbabel-core版本不对应所产生的, babel-loader 8.x对应babel-core 7.x babel-loader 7.x对应babel-core 6.x 刚一开始我一看到cannot find module,第一条件反射就认为我自己没...
  • `babel-loader@8.x`是webpack用于`Babel 7.x`的一个整合loader模块需要"babel-core 7.0 但是安装过来一直是"babel-core 6X 之后退成babel-loader": "^7.1.5", cnpm i babel-core babel-loader@7 babel-plugin-...
  • 解决问题: npm install -D babel-loader @babel/core @babel/preset-env webpack 参考链接: https://github.com/babel/babel/issues/8599
  • loader官方解释是文件预处理器,通俗点说就是webpack在处理静态文件的时候,...我们需要用到 babel-loader babel-core babel-preset 配合版本: webpack 3.x | babel-loader 8.x | babel 7.x npm install babel-loa
  • 我们新建一个项目,会先配置webpack,然后配置babel babel是一个编译工具,实际上,babel也是...babel-loaderloader之一) 用来连接webpack使用babel的加载器,真正将ES6转码的还是babel,所以还是需要安装babel.
  • * @/components/part/nav-top.vue in ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/components/home.
  • 我们新建一个项目,会先配置webpack,然后配置babel babel是一个编译工具,实际上,babel也...babel-loader 用来连接webpack使用babel的加载器 三者的关系 babel 是编译工具,把js高级语言转换成浏览器能识别的js语.
  • ES6 + babelbabel-loader)+ webpack演示 要求: 巴别塔(+ babel-loader) 网页包 设置 $ npm install -g babel $ npm install babel-loader --save-dev $ npm install -g webpack 建造 $ webpack 或观看目录...
  • base-loader 解析es6,将es6转化成...1.babel-loader //针对于babelloader文件 2.@babel/core //babel核心文件 3.@babel/preset-env //解析更高级代码 安装: cnpm i babel-loader @babel/core @babel/preset...
  • 本文介绍了webpack使用 babel-loader 转换 ES6代码示例,分享给大家,具体如下: 查询各个 loader的使用,可以在官网上查询。https://www.npmjs.com (一)安装 babel-loaderbabel-core。 使用命令 npm install...
  • webpack-babel-loader

    2016-08-26 00:12:16
    webpack入门和实战(二):全面理解和运用loader和plugins,理解babel-loader加载器的使用
  • webpack中的babel-loader

    2017-07-02 21:23:15
    babel-loader
  • webpack配置babel-loader

    2019-10-09 06:27:34
    cnpm i -D babel-core babel-loader babel-plugin-syntax-jsxbabel-plugin-transform-runtimebabel-plugin-transform-vue-jsxbabel-preset-envbabel-preset-stage-2 直接安装的babel-loader是8.0的需...
  • 首先要安装的三个:**babel-loaderbabel-core、babel-preset-env 1)安装babel-loader(不要把babel打成bable!!!!!!) npm i babel-loader -D 2)安装babel-core npm install -D babel-core
  • babel-loader 使用指南

    千次阅读 2019-05-28 13:47:14
    yarn add babel-loader @babel/core -D 复制代码使用 { test: /\.js$/, loader: 'babel-loader', include: [ path.resolve(__dirname, '../src') ] } 复制代码该配置指明了使用 babel 翻译 js 文件,但仅是这样...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,781
精华内容 13,112
关键字:

babelloader