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

Posted 黑木令

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端 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 转化功能, 需要的脚本文件) 。
        ]
      ,

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

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

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

如果对大家有所帮助,可以点个关注、点个赞; 文章会持续打磨 。
有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容 。

以上是关于前端 JavaScript 设计模式--搭建开发环境的主要内容,如果未能解决你的问题,请参考以下文章

前端开发工具环境搭建

第641期基于 webpack 搭建前端工程基础篇

前端技术栈都有哪些

前端 JavaScript 设计模式-大纲

前端 JavaScript 设计模式-大纲

《前端内参》,有关于JavaScript、编程范式、设计模式、软件开发的艺术等大前端范畴内的知识分享,旨在帮助前端工程师们夯实技术基础以通过一线互联网企业技术面试。