22 04月 2020

loaders中文翻译是装载机，从字面意思看它是用来安装某些东西的，它可以调用框架以外的脚本和工具来处理各种格式的文件，比如将Scss、Less分析转换成为CSS，将ES6、ES7转换为浏览器兼容的ES5，以及react中的JSX文件转换为JS文件。

npm install --save-dev babel-loader@7


配置要在webpack.config.js文件中modules关键字下配置。



配置项如下：

  • test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）

  • loader：loader的名称（必须）

  • include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）

  • query：为loaders提供额外的设置选项（可选）

第一步 在app文件夹中创建一个JSON文件（此处创建一个文件名为config.json的JSON文件）


image.png


在config.json文件中加入问候语：“Hello, welcome to loaders.”

// ./app/config.json
[{
    "text": "Hello, welcome to loaders."
}]


第二步 将app.js的文件中的问候语去掉并将config.json中的问候语导入。

var config = require('./config.json');
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = config[0].text;
  return greet;
}



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

  • 它可以帮你将（ES6、ES7...）转换为现浏览器支持的ES5，这样你就不用考虑新标准是否被浏览器识别了。

  • 让你能使用基于JavaScript进行了拓展的语言，比如React的JSX。


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


配置

在webpack.config.js文件中配置如下：

image.png


在项目根目录创建.babelrc如下：

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


在配置Babel过程中注意到react，我们要先安装react才能用ES6以及JSX语法。

npm install --save react react-dom


接下来我们要用ES6语法


修改app.js，让他以组件形式返回

这个时候要注意了，我们之前app.js文件名称的开头字母是小写，这里我们要改为大写，因为react组件名称是需要大写的。

//app.js
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模块

//main.js
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被正常打包了。

image.png