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能提供非常强大的处理功能,那那些是模块呢。