npm以及es6等概念

NPM初始化

npm init

npm init -y 所有的都是默认

下载依赖

npm install ?

指定版本npm install ?@version

配置镜像：http://npm.taobao.org

命令：npm config set registry http://registry.npm.taobao.org

查看：npm config list

根据package.json下载依赖：npm install

Babel

npm install --global babel-cli

babel --version

如果babel不允许使用，以管理员身份启动vscode

并且set-ExecutionPolicy RemoteSigned

ES6 转ES5

配置.babelrc

{
    "presets": ["es2015"],
    "plugins": []
}

安装转码器

npm install babel-preset-es2015 --save-dev

就他妈离谱

转码

1. 根据文件转码：babel source -o to
2. 根据文件夹转码：babel source -d to

模块化

1. 导出

   // xxx.js
   const sum = function(a, b) {
         
         
       return parseInt(a) + parseInt(b)
   }
   
   const subtract = function(a, b) {
         
         
       return parseInt(a) - parseInt(b)
   }
   
   // 设置哪些方法可以被调用
   module.exports = {
         
         
       sum,
       subtract
   }
   

2. 导入

   const x = require('./xxx.js')
   let a = x.sum(10, 4)
   console.log(a)
   

ES6的模块化

无法在用node命令执行，需要用babel转成es5

// 01.js
export function getList() {
    
    
    console.log('getList...')
}

export function save() {
    
    
    console.log('save...')
}

// 或者
function getList() {
    
    
    console.log('getList...')
}

function save() {
    
    
    console.log('save...')
}

export default {
    
    
    getList,
    save,
    test() {
    
    
        console.log('test...')
    }
}

// 02.js
import {
    
    getList, save} from './01.js'

getList()
save()

babel sourcedir -d dist
cd ./dist
node 02.js

webpack

1. 安装webpack：npm install -g webpack webpack-cli
2. 是否安装成功：webpack -v

编写js文件

// common.js
exports.info = function(str) {
    
    
    document.write(str)
}

// utils.js
exports.add = function(a, b) {
    
    
    return parseInt(a) + parseInt(b)
}

// main.js
const common = require('./common')
const utils = require('./utils')

common.info("值为:" + utils.add(1, 2))

都在src下

// webpack.config.js
// 和src同级别
const path = require('path') // nodejs内置模块
module.exports = {
    
    
    entry: './src/main.js', // 入口文件
    output: {
    
    
        path: path.resolve(__dirname, './dist'), // _dirname为当前路径
        filename: 'bundle.js' // 输出文件
    }
}

打包：webpack webpack --mode=development

引入的不是js文件后缀不能省略

1. 写css文件
2. 导入
3. 安装加载工具
4. 修改webpack.config.js

// render.css
body {
    
    
    background-color: red;
}

// main.js
const common = require('./common')
const utils = require('./utils')
require('./render.css')

common.info("值为:" + utils.add(1, 2))

npm install style-loader css-loader --save-dev

const path = require('path') // nodejs内置模块
module.exports = {
    
    
    entry: './src/main.js', // 入口文件
    output: {
    
    
        path: path.resolve(__dirname, './dist'), // _dirname为当前路径
        filename: 'bundle.js' // 输出文件
    },
    module: {
    
    
        rules: [
            {
    
    
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}