1JavaScript设计模式--ES6环境搭建

ES6开发环境搭建：

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

1、环境搭建。

使用的是webstorm。已经安装过了 node.js 。node -v 查看版本号。

安装 npm: npm install
查看版本：npm -v ;

npm init

初始化npm环境。输入命令后默认就可以，一直按Enter，最后按 y 。保存配置文件。会生成一个package.json文件。自己可以去修改。

有一次把文件夹的名称写为“design mode"，然后就出现了错误，初始化失败。原因是空格和‘mode’单词这两个原因造成的。mode应该是关键词。而且前面又出现了空格。所以系统在执行命令的时候会把文件夹的名称当成一个命令了吧。所以不要乱用空格啊。

2、新建一个文件夹src，再在里面新建一个index.js文件。

安装npm淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org
提高模块安装速度，这个非必要。http://npm.taobao.org/

3、安装 webpack 和webpack-cli

安装完成后 package.json 文件会发生变化。会把刚刚安装的依赖配置写入文件中。 (--save-dev中的-dev, 是安装的包仅供开发模式用，如果正式环境也需要用比如jQuery，就不需要这参数)

安装命令：npm install webpack webpack-cli --save-dev

安装完成后package.josn增加的内容：

"devDependencies": {

"webpack": "^4.16.5",

"webpack-cli": "^3.1.0"

}

4、在根文件夹中新建一个webpack.dev.config.js文件，写入以下代码。

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

然后在package.json文件scripts中添加一个dev。(把配置文件指向刚才创建的js文件，模式设置为development模式)

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

然后运行 npm run dev

会编译出1个文件。就是我们在webpack.dev.config.js中配置输出的/release/bundle.js文件。

5、安装两个插件：webpack-dev-server 和 html-webpack-plugin

在输入命令的时候空格问题。

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

我在第一次安装的时候，在html后面多了1个空格导致安装失败。html -webpack。应该是html-webpack。这样会变成安装html了。

末尾的保存依赖--save-dev是连在一起的。只有前面有个空格。

我们也可以分开安装：
npm install webpack-dev-server --save-dev
npm install html-webpack-plugin --save-dev

6、修改webpack.dev.config.js文件，代码如下。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry:'./src/index.js',
    output:{
        path:__dirname,
        filename:'./release/bundle.js'
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html'
        })
    ],
    devServer:{
        contentBase:path.join(__dirname,'./release'),
        open:true,
        port:9000
    }
}

ps:不小心把plugins写成了 plugin。导致运行不起来，查了好一会儿才找到原因。

7、修改 package.json中的dev项。把webpack 修改为 webpack-dev-server

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

8、运行 npm run dev

运行成功的话，会自动打开浏览器。显示index.html页面。同时会执行src/index.js中的代码。

9、安装babel
npm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev

感觉淘宝镜像的速度比我不用还慢 --registry=https://registry.npm.taobao.org

由于版本更新。可以把babel-preset-es2015 ---替换成 babel-preset-env

在一次配置完成之后一直有错误，提示什么babel-core 加载失败，折腾了老久。后来发现是babel版本的问题。loader的版本更新到了8.0.0了，需要core的版本是7.0以上，但是安装7.0版本的core失败，所以我把loader的版本降低成7.1.5了，才运行成功。

npm install [email protected] --save-dev //安装指定版本

10、新建文件.babelrc。保存为json格式

在配置文件中添加一个moudle。把es6的语法转换成es5的语法，过滤掉node文件夹中的文件。

11、测试

学习换成配置完成。测试一下。用ES6中才添加的类来测试一下。修改index.js文件。

class Person{
    constructor(name,age){
        this.name = name
        this.age = age
    }
    speak(){
        console.log(`My name is${this.name},age ${this.age}.`)
    }
}
var li = new Person('李二四',21)
li.speak()

控制台成功输出：My name is李二四,age 21.

后记，输出这样的错误。不知道为什么。

安装一个http-server可以直接打开以一个服务器。默认但口号是8080。也可以通过命令修改端口。

http-server -p 8081

1JavaScript设计模式--ES6环境搭建

猜你喜欢