06Babel

感悟

把webpack得入口和出口地址进行变更，同时devServer里面contentBase得地址也要变更，这个地址是本地服务器所加载得页面所在得目录

      devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
      } 

  

webpack学习：如今这个目录下得webpack.config.js得配置如下

      module.exports = {
        entry: __dirname + "/06Babel/app/main.js",
        output: {
          path: __dirname + "/06Babel/public",
          filename: "bundle.js"
        },
        devtool:"eval-source-map",
        devServer: {
          contentBase: "./06Babel/public", //本地服务器所加载的页面所在的目录
          historyApiFallback:true,//不跳转
          inline:true//实时刷新
        }
      }
  

新内容：Babel

Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：

• 让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持；
• 让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；

Babel的安装与配置

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

我们先来一次性安装这些依赖包

      // npm一次性安装多个依赖模块，模块之间用空格隔开
      npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

      npm run server 报错：
      ERROR in ./06Babel/app/main.js
      Module build failed (from ./node_modules/babel-loader/lib/index.js):
      Error: Cannot find module ‘@babel/core‘
       babel-loader@8 requires Babel 7.x (the package ‘@babel/core‘). If you‘d like to use Babel 6.x (‘babel-core‘), you should install ‘babel-loader@7‘.

       这时候 npm i babel-loader@7 -D
  

现在都直接安装到webpack学习 这个目录下，记得把package.json里"devDependencies"这个属性复制到子文件夹下

在webpack中配置Babel的方法如下:

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


  

现在你的webpack的配置已经允许你使用ES6以及JSX的语法了。继续用上面的例子进行测试，不过这次我们会使用React，记得先安装 React 和 React-DOM

      npm install --save react react-dom

  

接下来我们使用ES6的语法，更新Greeter.js并返回一个React组件

      //Greeter,js
      import React, {Component} from ‘react‘
      import config from ‘./config.json‘;
      
      class Greeter extends Component{
        render() {
          return (

          );
        }
      }
      
      export default Greeter

  

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

      // main.js
      import React from ‘react‘;
      import {render} from ‘react-dom‘;
      import Greeter from ‘./Greeter‘;
      
      render(, document.getElementById(‘root‘));


  

Babel的配置

Babel其实可以完全在 webpack.config.js 中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。我们现在的babel的配置并不算复杂，不过之后我们会再加一些东西，因此现在我们就提取出相关部分，分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项） ，如下：

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


    //.babelrc
        {
          "presets": ["react", "env"]
        }
  

到目前为止，我们已经知道了，对于模块，Webpack能提供非常强大的处理功能，那那些是模块呢。

06Babel

原文：https://www.cnblogs.com/lucy-xyy/p/11733223.html