【JS设计模式1】搭建ES6开发环境

最近又在学习JS设计模式了，之前的事情比较杂乱，一会儿跳到mpvue，一会儿是原生小程序之类的，后来从上家公司离职了，这样也能静下心边找工作边学习。
近期是打算看完设计模式，然后再回头去看小程序。所以会坚持先把每天看的设计模式的心得记录下来，再去更新原生小程序的学习心得，最后再是mpvue

搭建环境

这部分内容其实和webpack处的重叠了，之前学习webpack的时候只是简单的记录下来，现在回过头来看，发现webpack其实就是简单的配置，理解了感觉和gulp也差不多(纯配置上来说，当然功能是不一样的，webpack的功能很强大)。
主要的流程就是：

• 初始化npm 环境
• 安装webpack
• 安装webpack-dev-server
• 安装babel

初始化npm环境

npm init
然后一直回车，最后生成一个package.json文件，问你是否要保存这个文件，写yes就行了

此时项目的根目录下就出现了一个package.json文件了。

安装webpack

npm install webpack webpack-cli --save-dev --registry=https://registry.npm.taobao.org

其实到--save-dev 就可以回车了，后面那串是淘宝的镜像地址，为了安装的更快一些而已。

接着去根目录下新建一个webpack.dev.config.js文件，里面写上

// webpack.dev.config.js

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname,
    filename: './release/bundle.js'
  }
}

接着去package.json文件里新添一条命令

新添一条这个命令

"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"

解释一下：
运行webpack的dev命令，将配置文件指向刚刚创建的webpack.dev.config.js文件，--mode development表示是要求设置一个模式，这里设置为开发者模式，
此时在命令行里敲npm run dev就会是这样子：

绿色表示编译成功

安装webpack-dev-server

npm install webpack-dev-server html-webpack-plugin --save-dev --registry=https://registry.npm.taobao.org


// webpack-dev-server是搭建小型服务器，html-webpack-plugin是生成html文件等插件

然后去根目录创建一个文件叫index.html
写个h5的模板。

这样的模板

现在的目录结构是这样的：

目录结构

【PS： release文件夹是刚刚执行 npm run dev的时候编译出来的】

接下来去修改webpack.dev.config.js文件。

改成这样

devServer是本地开发环境的简单服务器，根目录是从 ./release目录获取文件，其他的解释如上图。
然后再去 package.json里修改 dev命令：

image.png

再运行一下npm run dev，此时会自动打开浏览器。

---

简单解释一下：
plugins：HtmlWebpackPlugin是说新建了一个h5模板，但是也没有引用什么JS，当我们放在这里之后，会将release/bundle.js自动插入到模板中，然后去运行。
devServer: 第一个是配置根目录，然后是是否要自动打开浏览器，port表示打开的端口。

安装babel

npm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev --registry=https://registry.npm.taobao.org

新建.babelrc文件在根目录下，然后去文件内这样写：

注意路径

然后再去更改 webpack.dev.config.js：

添加module

【PS：非常重要的一点，我昨天安装的babel-loader是8开头的版本，但是装了之后会报错，然后弄了好久，最后去官网一看】

babel官网

如果安装的是 babel-loader 那么对应的就是 @babel/core，如果安装的是 babel-core，对应装的就是 babel-loader@7

弄完这些之后，去src/index.js里写一段es6的代码，然后npm run dev启动一下，这个时候发现是可以正常编译启动的啦。