title: 【18】前端工程化：ES6模块化和webpack打包学习笔记 date: 2019-12-11 20:41:11 categories:

• 运维
• centos tags:
• linux
• vue
• 黑马前端学习笔记

摘要：前端工程化：ES6模块化和webpack打包学习笔记

【18】前端工程化：ES6模块化和webpack打包学习笔记

1. 模块化相关规范

1.4 大一统的模块化规范-ES6模块化

1. Node.js 中通过babel体验ES6模块化

1. npm install –save-dev @babel/core @babel/cli @babel/preset-env @babel/node
2. npm install –save @babel/polyfill
3. 项目跟目录创建文件 babel.config.js
4. babel.config.js 文件内容如右侧代码

const presets = [
  [
    '@babel/env',
    {
      targets: {
        edge: '17',
        firefox: '60',
        chrome: '67',
        safari: '11.1'
      }
    }
  ]
]
module.exports = { presets }

4. 通过npx babe1-node index.js执行代码

   不知为何，npx会报错，windows下去掉npx也能执行而且不报错。babel-node index.js

2. 默认导入导出

### 默认导出
export default{
#要暴露的成员
}

### 默认导入
import x form './x.js'

3. 按需导入导出

4. 不导出、导入并直接运行

6. webpack基本使用

npm install webpack webpack-cli -D