es6 模块化

131 阅读2分钟

bable官网 :www.babeljs.cn/

提一嘴:

--save -dev的区别:

--save:将保存配置信息到pacjage.json。默认为dependencies节点中。

--dev:将保存配置信息devDependencies节点中。

因此:

--save:将保存配置信息到pacjage.json的dependencies节点中。

--save-dev:将保存配置信息到pacjage.json的devDependencies节点中。

dependencies:运行时的依赖,发布后,即生产环境下还需要用的模块

devDependencies:开发时的依赖。里面的模块是开发时用的,发布时用不到它。

详细说明:
  • ---npm i 插件 ,会把插件安装到node_modules目录中,不会修改package.json,
  • ---npm i 插件 --save (-S) ,项目发布上线之后还会依赖用到的插件,没有这些插件,项目不能运行 ---自动更改package.json 写入dependencies 节点
  • ---npm i 插件 -g是不会更改package中的内容 但是可以存在node_modules目录中
  • ---没有package.json 还怎么开开心心的 clone呢
  • ---npm i 插件 --save-dev(-D) ,安装到开发依赖中,项目上线之后不会用到的插件,例如'babel-loader',项目解析完发布 ---自动更改package.json 写入devDependencies 节点

代码演示:

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
2.npm install --save @babel/polyfill
3.babel.config.js中:
const presets = [
  [
    '@babel/env',
    {
      targets: {
        edge: '17',
        firefox: '60',
        chrome: '67',
        safari: '11.1'
      }
    }
  ]
]

module.exports = { presets }
4.npx babel-node .\index.js

不导出就为空

index.js

console.log('没有面包的爱情就像纸质的小船,走着走着就沉下去了');

import DiyNameM1 from './m1'
// 按需导入
import {name1,age,add,hobby} from './m1'
console.log(DiyNameM1);
console.log(name1);
console.log(add);
console.log(age);
console.log(hobby);


// import name from './m1';
// import age from './m1';
// import hobby from './m1';
// import add from './m1';

m1.js

var a= 10 ;
var b = 20;
var c = 30;
 function name(params) {
    console.log('1111111111111')
}

// 默认导出  也就是说导出的m1.js不包括 按需导出的东西
export default {
    a,
    b,
    name
}
// export default {
//    c
// }

// 按需导出
export let name1 = "lumingqing";
export let age = "20";
export let hobby = 'backetball';
export function add(){
console.log('aaaaaaaaaaaaaaaa');

    // console(x+y);
}


直接执行模块中的代码