作为笔记记录es6调试环境的配置方法。

安装node

node版本更新较快,大版本号双数为稳定版,单数为开发版。不论win还是mac环境按照官网文档下载对应版本安装狂点下一步即可,无需任何其他配置,node自带npm环境。

新建工作目录

WorkSpace中新建工作文件夹

运行

npm init

根据个人需要填写项目名及描述即可。packpackag.json如下

{
  "name": "designmodel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
     //自定义命令
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  },
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.24.1"
  }
}

如需连接git仓库,在GitHub上新建仓库并于本地终端配置ssh码后,运行

//登录git
git config --global user.name "用户名"
git config --global user.email "登录邮箱"
//生产ssh-key
ssh-keygen -t rsa -C "登录邮箱"
//配置github上的ssh
git init

目录中会出现.gitignore文件,每一行为一项配置

/node_modules
/coverage
/build

npm-debug.log*
yarn-debug.log*
yarn-error.log*
//大部分编辑器会在根目录下创建配置文件,建议ignore
.idea
.vscode

安装babel

推荐使用 babel-cli

npm install --save-dev babel-cli babel-preset-env

配置babel转码ES6到ES5
在根目录下会新建一个 .babelrc 文件

{
    "presets": [
        "es2015",
        "latest"
    ],
    "plugins": [
    ]
}

安装webpack

得益于webpack-dev-server,我们可以实时预览代码运行状态
推荐官方

npm install --save-dev webpack webpack-cli

还需要用到html-plugin插件

npm install --save-dev html-webpack-plugin

配置webpack.dev.config.js

//引入path
const path = require('path');
//启用html-webpack-plugin插件,每次保存代码即将打包后js投入到thml文件中运行
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //your conf
};

个人配置
在根目录下新建thml文件,生成空html-body标签即可。

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname,
        filename: './release/bundle.js'
    },
    //正则匹配文件类型进行打包
    module: {
        rules: [{
            test: /\.js?$/,//检验文件的格式
            exclude:/(node_modules)/,//略过检验的目录
            loader:'babel-loader',//检测到的匹配文件进行处理,使用babel-loader加载
        }]
    },
    //插件部分
    plugins:[
        new HTMLWebpackPlugin({
            template : './index.html'
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, './release'),//根目录
        open: true,//自动打开浏览器
        port: 9000
    }
};

自此,运行环境配置完毕。
使用webpack.dev.config.js配置启动服务

npm run webpack-dev-server --config ./webpack.dev.config.js --mode development

发表评论

电子邮件地址不会被公开。 必填项已用*标注