SASS、Babel、webpack

SASS

安装

npm install node-sass -g    //-g是全局安装
node-sass -v    //查看版本号

使用

将css文件后缀改为scss，运行命令行

node-sass main.scss main.css    //将main.scss翻译为main.css

SASS的语法很容易理解：

body{
    div{
        height: 100px; border: 1px solid #999;
        > ul{
            list-style: none; display: flex; justify-content: center; align-items: center;
            > li{ padding: 20px; font-size: 14px;}
        }
    }
    footer{margin: 0; padding: 0}
}

选择器对应如下
body{}
body>div{}
body>div>ul{}
body>div>ul>li{}
body footer{}


以下是翻译完成的样子：
body div {
  height: 100px;
  border: 1px solid #999; }
  body div > ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center; }
    body div > ul > li {
      padding: 20px;
      font-size: 14px; }

body footer {
  margin: 0;
  padding: 0;

通过增加-w参数，可以让sass监听我们写的过程

node-sass main.scss -w main.css

Babel

安装

npm install --save-dev babel-cli babel-preset-env
npm install --save-dev babel-cli

创建.babelrc文件
写入
{
  "presets": ["env"]
}

在package.json里的scripts内写入
"build": "babel src -d lib"

使用
文档中的npm run build相当于执行babel src -d lib，但是会报错，我们需要运行

./node_modules/.bin/babel src -d lib  

//将src目录下的js翻译到lib目录，没有src目录就自己创建，lib目录babel会给你创建，
//src和ilb我们可以更改为自己需要的目录，一般是src -d dist
//src全称是source，意思是未发布的代码
//dist全称是distribution，意思是已发布的代码，页面应该引用dist内的js
//第三方库应该在vendors，比如jQuery等

./node_modules/.bin/babel src -d lib --watch //也能像SASS的-w一样，监听写js的过程，实时转译

整合代码

现在我们将需要翻译的js、css文件放入src下，然后运行命令行

node-sass src/css -o dist/css -w
//这个时候，sass不会将文件翻译并放入dist，它在等待文件出现变动，当文件出现变动后，就会编译到dist去
./node_modules/.bin/babel src/js -d dist/js --watch

到最后我们发现，我们需要将src内的所有文件转移到dist内，有需要翻译的就翻译一下，在这个过程中我们需要使用很多工具：sass，babel，还有html以及img，当这些有了变动，就实时更新到dist目录下，所以这就有了webpack。

node_modules不能提交到Github！！！

webpack

首先，不废话，Google到webpack的文档，照着文档抄！！！

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install --save-dev webpack
yarn add webpack --dev  //npm安装失败时可以尝试使用yarn来安装


touch webpack.config.js
vi webpack.config.js
//写入以下代码：
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};
//将src目录下的index.js编译到dist目录下，文件名为main.js

npx webpack

在webpack中使用Babel

现在我们的webpack能做copy工作了，我们需要将ES6语法编译成IE能运行的语法，加入babel。
老办法，google webpack babel

npm install babel-loader babel-core babel-preset-env webpack
//将下面的代码写入webpack.config.js中
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']  
          //我是用的是webpack 3,babel 6, babel-loder 7
          //如果是babel 7，babel-loder 8，需要改成：
          //presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

npx webpack
//如果不报错就说明我们成功了
//如果报错如：Couldn't find preset "xxx" relateve to directory //......
//我们就npm i xxx， 缺什么装什么！

版本号

为了检验Babel是否有用，我们在src/index.js中写入一句let a = 1，
然后在运行npx webpack，查看dist/main.js，是否被翻译为var a = 1

Babel起作用后，我们可以使用ES6的新语法模块化了

cd src
mkdir js
cd js
touch module-1.js
touch module-2.js
touch app.js

更改三个JS文件的内容
module-1:

function fn(){
    console.log('module-1')
}

export default fn   //默认传出fn

module-2:

function fn(){
    console.log('module-2')
}

export default fn

app.js:

import module1 from './module-1'
import module2 from './module-2'

module1()
module2()

然后注意修改webpack.config.js

改为app.js

html中引入dist里js内的main.js

运行npx webpack

在webpack中使用SASS

安装

npm install sass-loader node-sass webpack --save-dev

//在webpack中添加代码，在module的rules中添加这个
{
    test: /\.scss$/,
    use: [
        "style-loader",
        "css-loader",
        "sass-loader" 
    ]
}

//在app.js中将src/css的main.scss引入
import '../css/main.scss'

npx webpack
//此时会报错，因为我们没有安装style-loader和css-loader
npm i style-loader css-loader

npx webpack
//没报错的话就成功了，反正我没报错 :)

然后我们就会看到，main.js中包含了我们写的css，当这个js在网页上加载完成的时候，css也会写入到页面内。

postCSS Loader

postCSS Loader可以帮我们的css属性自动加前缀，比如display:flex

废话不多说，直接上

npm i -D postcss-loader

touch postcss.config.js

//在postcss.config.js中写入
module.exports = {
  //parser: 'sugarss',  
  //这个需要注释掉，我也不知道为啥，搜到的，不然会报错
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': {},
    'cssnano': {}
  }
}

//改写webpack.config.js
{
    test: /\.scss$/,
    use: [{
      loader: "style-loader" 
    }, {
      loader: "css-loader",
      options: { importLoaders: 1 } 
    }, {
      loader: "postcss-loader"
    }, {
      loader: "sass-loader" 
    }]
}

//然后继续npm i
npm i postcss-import postcss-cssnext cssnano

npx webpack
//不报错的话就成功了，自己测试是否加前缀
//报错的话还是先看形式，缺啥装啥，其他我没遇到 : )