前端 JavaScript 设计模式--搭建开发环境

本章节的主要内容是–搭建开发环境

因为所涉及到的知识点包含ES6语法, 也为了我们的执行效率更高所以我们搭建一套自己需要的开发环境。

如图所示:

知识点大纲

1. 搭建开发环境
2. 什么是面向对象
3. UML 类图

搭建开发环境

1. 初始化 npm 环境 。
2. 安装 webpack 。
3. 安装 webpack-dev-server 。
4. 安装 babel (解析 ES6 语法)。

细节知识点:

--save-dev:
  1. 标识文件除了安装以外, 还要在 package.json 文件中创建一个安装包依赖的一些字段 。
  2.  --save-dev 在开发环境中使用 -> devDependencies 。

 --save:
  1. 项目线上运行使用 -> dependencies 。

 -g:
  1. 全局安装 。
  
JS 是一种 弱面向对象 的语言(弱类型语言); 不像 Java 是一种 强面向对象 的语言 。

搭建开发环境流程:

1. 初始化 npm 环境
   1. 查看 node 版本: node -v
   2. 查看 npm 版本: npm -v
   3. 初始化 npm 环境: cnpm init
      1. 一路敲击回车就可以 。
   4. 在 demo 文件的根目录中, 创建 src 文件夹 。
   5. 在 src 中建立我们的入口文件 index.js 文件 。


2. 安装 webpack
   1. cnpm install webpack@4.9.1 webpack-cli@3.1.1 --save-dev   < webpack4.2.0以上版本要使用 3.1.1 版本的webpack-cli >
   2. 在 package.json 文件中修改 "scripts" 配置项 。
      1. "dev": "webpack --config ./webpack.dev.config.js"
      2. 也就是说: 运行 webpack 这个命令, 然后我们把配置文件 指向(--config) webpack.dev.config.js 这个文件
      3. "dev": "webpack --config ./webpack.dev.config.js --mode development" 设置一个模式: --mode development 即开发者模式 。
   3. 执行: npm run dev 命令, 其实就是执行 "dev": "webpack --config ./webpack.dev.config.js --mode development" 设置一个模式: --mode development 配置 。


3. 安装 webpack-dev-server
   1. 是 webpack 集成的本地服务的一个环境
   2. 安装: cnpm install webpack-dev-server@3.1.4 html-webpack-plugin@3.2.0 --save-dev
   3. 在 demo 的根目录中创建 index.html 文件 。
   4. 重新配置 webpack.dev.config.js 中的内容 。
      plugins: [ // 插件列表, 是一个数组
        new htmlWebpackPlugin({ // 这个插件是与网页模板有关系的 。
          template: './index.html'
        })
      ],
      devServer: {
        contentBase: path.join(__dirname, './release'),
        open: true, // 执行命令, 浏览器会自动打开我们的项目 。
        port: 9000 // 端口
      }
   5. 修改 package.json 文件
      1. "dev": "webpack --config ./webpack.dev.config.js --mode development" 修改为 "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
      2. webpack-dev-server 可以实现模块热更新的功能 。


4. 安装 babel (解析 ES6)
   1. 用来解析 ES6 语法
   2. 安装: cnpm i babel-core@6.26.3 babel-loader@7.1.4 babel-polyfill@6.26.0 babel-preset-es2015@6.24.1 babel-preset-latest@6.24.1 --save-dev
   3. 根目录下创建 .babelrc 文件(这是一个 json 文件)。
      {
        "presets": ["es2015", "latest"],
        "plugins": []
      }
   4. 重新配置 webpack.dev.config.js 文件 。
      module: { // 模块
        rules: [{ // rules 是一个数组
          test: /.js?$/, // 需要检验那些文件
          exclude: /(node_modules)/, // 忽略文件(不需要检验的文件)
          loader: 'babel-loader' // 需要执行的 loader(也就是实现 ES6 转化功能, 需要的脚本文件) 。
        }]
      },

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 “前端设计模式” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。

《前端设计模式》专栏上篇: 设计模式大纲

《前端设计模式》专栏下篇: 面向对象-封装、继承、多态

如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨 。

有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容 。