前端随心记---------前端打包工具

ES6模块化：

export default{  }                 引入import  文件名  from   文件地址，

export  function  fn（ ） {  }             引入 import  { fn }  from   地址 ；

 

开发环境----babel （编译ES6语法）

资料中文网：https://www.babeljs.cn/

1.node环境，运行npm  init ；

2.npm  install  --save -dev babel-core babel-preset -es2015 babel -preset -latest 

3.创建  .babelrc 文件

4.npm  install  --global  babel -cli  (管理员模式开启命令行)

5.babel --version

 

开发环境--webpack  

资料中文网：https://www.webpackjs.com/

1.npm install  webpack  babel-loader --save -dev

2.配置 webpack.config.js

3.配置package.json 中的scripts

4.运行 npm  start 

 

module.exports = {
    entry:'./src/index.js',  //入口
    output:{                 //出口
       path:__dirname,
       filename:'./build/build.js'   //自动创建文件夹
    },
    module:{
       rules:[{
              test:/\.js?$/,      //所有.js结尾
              exclude:/(node_modules)/,   //除去这个文件
               loader:'babel-loader'
       }]
    }
}

 

开发环境  --rollup 

1.npm init   

2.npm i  rollup-plugin-node-resolve rollup-plugin-babel bale-plugin-external-helpers babel-preset-latest --save-dev

3.配置  .babelrc

4.配置  rollup.config.js

 

rollup 与  webpack 的区别

rollup 功能单一，webpack功能强大。

 

前端打包工具有哪些？？

 

转载于:https://www.cnblogs.com/hudunyu/p/11432759.html