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