The front end of the front packaging tools --------- heart in mind

ES6 Modular:

introducing export default {} import file address from the file name,

export function fn () {} is introduced import {fn} from the address;

 

Development environment ---- babel (compiled ES6 grammar)

Chinese Information Network: https://www.babeljs.cn/

1.node environment, run npm init;

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

3. Create a file .babelrc

4.npm install --global babel -cli (administrator mode on the command line)

5.babel --version

 

Development environment --webpack  

Chinese Information Network: https://www.webpackjs.com/

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

2. Configure webpack.config.js

3. The configuration scripts package.json

4. Run npm start 

 

= module.exports { 
    entry: './src/index.js',   // inlet 
    Output: {                  // exit 
       path: __ dirname, 
       filename: './build/build.js'    // create a file folder 
    }, 
    Module1 : { 
       the rules: [{ 
              Test: /\.js?$/,       // all end .js 
              the exclude: / (the node_modules) /,    // remove this file 
               Loader: 'Babel-Loader' 
       }] 
    } 
}

 

Development environment --rollup 

1.npm heat   

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

3. Configure .babelrc

4. Configuration rollup.config.js

 

The difference rollup and webpack

rollup features a single, webpack powerful.

 

Front-end packaging tools What? ?