精华内容
下载资源
问答
  • Babel

    千次阅读 2020-02-21 18:40:53
    Babel是一个广泛使用的转码器,它可以帮你实现以下操作: 它可以帮你将(ES6、ES7...)转换为现浏览器支持的ES5,这样你就不用考虑新标准是否被浏览器识别了。 让你能使用基于JavaScript进行了拓展的语言,比如...

    Babel是一个广泛使用的转码器,它可以帮你实现以下操作:

    • 它可以帮你将(ES6、ES7...)转换为现浏览器支持的ES5,这样你就不用考虑新标准是否被浏览器识别了。
    • 让你能使用基于JavaScript进行了拓展的语言,比如React的JSX。

    1. 安装

    Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你都需要安装单独的包(用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包)。

    npm install --save-dev babel-core
    npm install --save-dev babel-preset-env
    npm install --save-dev babel-preset-react
    

    安装的依赖包是不是有点多,需要npm安装好多遍,当然也不是必须要分开安装,你完全可以多个依赖包一起安装,这里要注意的是:“如果多个依赖包一起安装那么每个依赖包之间需要用空格隔开”,如下:
    npm install --save-dev babel-core babel-preset-env babel-preset-react
    本文以webpack文章的demo为例,如果未阅读上文,并且想了解完整过程请点击回到上文

    2. 配置

    先来看下在webpack.config.js文件中配置如下:

    module.exports = {
        ...
        module: { // 这里配置Bobal
            rules: [
                {
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "env", "react"
                            ]
                        }
                    },
                    exclude: /node_modules/
                }
            ]
        }
    }
    

    当然这样配置是完全没错的,但是在正式项目中需要在webpack.config.js文件中配置很多项配置,这样就使得这个文件有特别多配置,从而使得这个配置文件会特别复杂,因此为了使这个文件配置变得稍微简单点,一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中,webpack会自动调用.babelrc里的babel配置选项。
    接下来我们在来修改配置文件

    第一步 在项目根目录创建.babelrc如下:

    第二步.babelrc中配置babel

    {
      "presets": ["react", "env"]
    }
    

    第三步 修改webpack.config.js

    module.exports = {
        ...
        module: {
            rules: [
                {
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader",
                    },
                    exclude: /node_modules/
                }
            ]
        }
    }
    

    在配置Babel过程中大家有没有注意到react,大家想到了什么,没错就是安装react,我们要先安装react才能用ES6以及JSX语法。

    npm install --save react react-dom
    

    接下来我们要用ES6语法

    第四步 修改app.js,让他以组件形式返回
    这个时候要注意了,我们之前app.js文件名称的开头字母是小写,这里我们要改为大写,因为react组件名称是需要大写的。

    import React, {Component} from 'react'
    import config from './config.json';
    
    class App extends Component{
        render(){
            return (
                <div>
                    {config[0].text}
                </div>
            )
        }
    }
    export default App
    

    修改main.js如下,使用ES6的模块定义和渲染App模块

    import React from 'react';
    import {render} from 'react-dom';
    import App from './App';
    
    render(<App />, document.getElementById('root'));
    

    第五步 重新使用npm start打包,并且使用npm run server启动本地服务,如果之前打开的本地服务器没有关闭,你应该可以在localhost:8080下看到与之前一样的内容,这说明react和es6被正常打包了。

     

    展开全文
  • babel

    2020-05-19 09:21:21
    babel的安装和使用 在node.js和npm环境下加粗样式 1 .安装babel 1 在目标文件位置打开终端,输入命令:npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node 2 安装完毕之后,再次输入命令...

    node.js的模块化–babel的安装和使用

    在node.js和npm环境下加粗样式

    1 .安装babel
    1 在目标文件位置打开终端,输入命令:npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
    2 安装完毕之后,再次输入命令安装:npm install --save @babel/polyfill

    2.创建babel.config.js
    1 在项目目录中创建babel.config.js文件。
    编辑js文件中的代码如下:

       const presets = [
                ["@babel/env",{
                    targets:{
                        edge:"17",
                        firefox:"60",
                        chrome:"67",
                        safari:"11.1"
                    }
                }]
            ]
            module.exports = { presets }  //暴露
    

    3.创建index.js文件
    1.index.js文件作为入口文件,与babel.config.js同级
    2 在index.js中输入需要执行的js代码(导入导出模块)

    4 使用npx执行文件
    1 打开终端,输入命令:npx babel-node ./index.js
    2 可以看到的执行代码

    5 导入导出
    1 设置默认导入/导出
    A.默认导出

    export default {
        a
    },如下:
    let num = 100;
    //在一个模块中,只允许使用export default向外默认暴露一次成员
    export default{
        num
    }
    

    B.默认导入
    import 接收名称 from “模块标识符”,如下:

     import m1 from './m1.js'
    

    2 设置按需导入/导出
    A.按需导出
    直接导出需要的数据,可多次

     	export let num = 998;
        export let myName = "jack";
        export function fn = function(){ console.log("fn") }
    

    B.按需导入

    import { num,fn ,myName } from "./m1.js"
    

    一个模块中既可以按需导入也可以默认导入,一个模块中既可以按需导出也可以默认导出,互不影响

    3.直接导入并执行代码
    直接import “模块标识符”;

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,114
精华内容 19,245
关键字:

babel