这样,一个完整的模块打包体系就建立起来了。
4、ES6
ES6,即ECMAScript 6.0,是 JavaScript的下一代标准。ES6里面新增了很多语法特性,使得编写复杂的应用更加优雅自然。
ES6中引入了诸如let和const、箭头函数、解构赋值、字符串模版、Module、Class、Promise等特性,使得前后端编程语言在语法形式上的差异越来越小。
我们来看一下:
import React from 'react' //模块引入 import '../styles/reactStack.scss' class ReactStack extends React.Component { //class特性 render() { const learner = {name: '云陌', age: 18} //const定义变量 const mainSkills = ['React', 'ES6', 'Webpack', 'Babel', 'NPM',] const extraSkills = ['Git', 'Postman'] const skillSet = [...mainSkills, ...extraSkills] const { name } = learner //解构赋值 let greetings = null //let定义变量 if (name) { greetings = `${name},欢迎来到${mainSkills[0]}的世界!` //字符模版 } //以下用了箭头函数 return ( <div className="skills"> <div>{greetings}</div> <ol> {skillSet.map((stack, i) => <li key={i}>{stack}</li>)} </ol> </div> ) } } export default ReactStack //模块导出
当然,并非所有浏览器都能兼容ES6全部特性,但看到这么优雅的书写方式,只能看怎么行呢?因此,这里又引出了一个神器,Babel!
5、Babel
Babel是一款JavaScript编译器。
Babel可以将ES6语法的代码转码成ES5代码,从而在浏览器环境中实现兼容。
Babel内置了对JSX的支持,所以我们才能向上面那样直接return一个JSX形式的代码片段。
具体用法不在本文过多讲述。
6、Styles引入
在上面的代码中,有以下样式引入方式:
import '../styles/reactStack.scss'
样式文件如下:
body { background: #f1f1f1; } .skills { h3 { color: darkblue; } ol { margin-left: -20px; li { font-size: 20px; color: rgba(0, 0, 0, .7); &:first-child { color: #4b8bf5; } } } }
样式文件要在项目中起作用,还需要在package.json里面添加相应的loader依赖,如css-loader, sass-loader, style-loader等,别忘了package.json里还需要node-sass依赖,然后安装即可。
webpack.config.js中相应配置如下:
module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"] } ] }
内容版权声明:除非注明,否则皆为本站原创文章。