sass & babel
mac 使用 yarn 安装 sass
sass是一种css预编译语言, 是css的一种增强语言, 可以让我们像编写普通编程语言一样编写css, 比如变量, 函数等, 有兴趣学习的同学可以看sass官网
第一步: 全局安装scss
yarn global add node-sass
第二步:检查版本号
node-sass -v
当用上面只能能看到node-sass版本号就说明全局安装正确
这个时候我们就可以写scss了, 当写完scss, 我们需要将scss转换成浏览器可读的css
node-sass main.scss main.css
但是这样有个不方便的地方, 每次我们更新scss文件内容的时候, 都需要手动运行命令转换成css, 因此我们可以用下面的命令让系统自动转成css
node-sass main.scss main.css -w
我们还可以将整个文件夹里所有的scss批量转换成css
node-sass src/css/ -o dist/css/ -w
mac 使用 yarn 安装 babel
babel是用于将es6语法编译成es5语法的编译器, 有兴趣的同学请看babel官网
第一步: 安装 babel 开发依赖
yarn add babel-cli babel-preset-env --dev
第二步: 创建.babelrc, 并添加设置
{
"presets": ["env"]
}
第三步: 运行babel, 将src目录里的es6编译成es5语法并输出到lib
./node_modules/.bin/babel src -d lib
同样可以自动编译
./node_modules/.bin/babel src/js/ -d dist/js/ --watch
我们还可以像上面那样监听html的变化, 可以监听img的变化等等
自动化
我们在上面实现了两个功能, 一个自动编译sass, 一个自动编译babel, 这样当我们修改任何文件的时候, 就会自动编译并保存的指定的目录。我们还可以用更多的工具实现更多的功能, 比如css后编译之类的, 这些工具就实现了前端自动化。
但是这里有一个问题, 每次做新项目我们都要手动安装很多依赖, 并且都需要把上面所有的东西都再手动配置一遍, 这样会很麻烦, 所以我们有没有更好的方法来减少我们这种重复劳动呢？ 答案不言而喻。
在前端发展历程中, 出现过不少为了解决这种重复性劳动的工具, 比较著名的有grunt, gulp等, 但是这些工具基本上已经被webpack代替, 所以我们主要讲webpack的使用, 至于grunt, gulp等, 有兴趣的可以自己去了解, 不过webpack由于配置麻烦也被很多人诟病, 虽然现在webpack是主流, 但是以后很可能会被代替, 比如最近出现的parcel, 就是webpack的有力竞争者, 后面我们也会提一下parcel的使用
前端工程化
为什么前端需要工程化, 我个人的理解就是因为前端现在越来越复杂，设计的问题和环节也越来越多，不采用工程化管理，就无法很好的实现团队协同和降低复杂性。
工程化是一个很大的概念, 牵扯到软件工程的方方面面, 大到分支管理 , 自动化测试, 部署等, 小到代码规范， 文件格式等, 我们这里只介绍webpack的使用, 让大家对工程化有个感性的认识, 至于更深层次的内容, 这个就需要在以后工作总大家慢慢学习了, 靠一篇文章是不可能讲清楚的
工程化的第一步就是规范文件夹, 下面这个图就是我们前端最典型的文件夹大分类
src
未经翻译的源代码dist
待发布代码vendors
第三方库(这个主要是非npm安装的第三方库)node_modules
第三方(npm安装的第三方库都在这里)
webpack使用
基本流程使用
第一步: 初始化package.json
yarn init
第二步: 安装webpack
yarn add webpack webpack-cli --dev
第三步: 在项目目录下创建webpack.config.js配置文件
第四步: 设置配置文件
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
entry
入口文件, webpack从哪个文件开始打包
output
输出地址, webpack打包好的文件输出到哪里, 文件名是什么, 路径是什么
第五步: 在package.json中配置scripts, 这里需要注意, webpack 4 有两个模式, 一个开发模式, 一个生产模式
第六步: 运行webpack开发模式
yarn run build
当我们运行上面代码后, 我们就会发现dist文件夹内多出了一个bundle.js的文件, 这就是打包好的js文件, 这就是webpack的基本用法, 知道了基本用法后, 我们就要安装各种插件, 以达到让webpack一键完成自动编译es6到es5, scss转换成css等功能
安装babel-loader
在webpack.config.js中添加module
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
安装babel依赖
yarn add babel-loader babel-core babel-preset-env --dev
安装SASS/stylus Loader
因为我们之前已经安装过babel了, 所以我们需要在webpack.config.js的module中追加SASS Loader设置
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}
]
}
安装SASS Loader依赖
yarn add style-loader css-loader sass-loader node-sass --dev
在入口文件中引入scss文件
import './style/style.scss'
这样SASS Loader就准备完毕了, 但是这时候如果直接运行webpack会报错, 因为还缺少file-loader读取图片等信息
stylus loader用法同上, 把sass依赖和设置换成stylus即可
npm install stylus-loader stylus --save-dev
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.styl$/,
use: [{
loader: 'style-loader'
},{
loader: 'css-loader'
},{
loader: 'stylus-loader'
}]
}
]
}
};
file-loader
依然是设置webpack.config.js的module
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
}
安装file-loader依赖
yarn add file-loader --dev
在入口文件中引入图片文件
import './img/avatar.jpg'
这样就可以读取图片了
postcss-loader
postcss是一个css后编译器, 可以自动帮css增加前缀等功能
创建postcss.config.js文件
module.exports = {
parser: 'sugarss',
plugins: {
'postcss-import': {},
'postcss-cssnext': {},
'cssnano': {}
}
}
设置webpack.config.js的module
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: 'css-loader', options: { importLoaders: 1 } // translates CSS into CommonJS
}, {
loader: "postcss-loader" // autoprefixer to CSS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{
test: /\.(png|jpg|gif)$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
}
安装依赖
yarn add postcss-loader postcss-import postcss-cssnext sugarss --dev
这时候运行webpack可能会他是css语法错误Unnecessary curly bracket, 这是由于postcss.config.js中配置了sugarss解析器, 我们不用就好了, 修改postcss.config.js文件
module.exports = {
//parser: 'sugarss', 暂时先不用sugarss
plugins: {
'postcss-import': {},
'postcss-cssnext': {},
'cssnano': {}
}
}
这样运行webpack就不报错了, 但是这里还会有一个提示说,我们重复使用了autoprefixer插件, 我们在postcss.config.js里把cssnano注释掉就好了
module.exports = {
//parser: 'sugarss', 暂时先不用sugarss
plugins: {
'postcss-import': {},
'postcss-cssnext': {},
// 'cssnano': {}
}
}
这就是webpack的日常配置, 反正为了写这个教程我大概配置了一个小时吧, 总之webpack配置就是这么坑..
parcel
由于webpack的配置实在是太麻烦太麻烦, 所以我个人是特别反感这个东西的, 在2017下半年, 前端界出现了一个自称0配置的工程化工具parcel, 因此我毫不犹豫尝试了下parcel
parcel 是一个Web应用程序 打包器(bundler) ，与以往的开发人员使用的打包器有所不同。它利用多核处理提供极快的性能，并且你不需要进行任何配置。
首先使用 Yarn 或 npm 安装 Parcel ：
yarn global add parcel-bundler
parcel 可以将任何类型的文件作为 入口点(entry point) ，但是 HTML 或 JavaScript 文件是一个很好的开始。如果你使用相对路径将你的主 JavaScript 文件链接到 HTML 中，Parcel 也会为你处理，并将该引用替换为输出文件的 URL 。
接下来，创建一个 index.html 和 index.js 文件。html文件引入index.js, index.js用于引入其他模块, 这里我们引入一个scss模块
<html>
<body>
<script src="./index.js"></script>
</body>
</html>
import './main.scss'
Parcel 内置了一个开发服务器，这会在你更改文件时自动重建你的应用程序，并支持 模块热替换 ，以便你快速开发。你只需指定 入口文件 即可：
parcel index.html
好了， 完了, 是不是比webpac简单多了呢?
