这是模块化开发、主流框架和最新版的ECMAScript语法规范的一个小demo
准备工作
安装 nodeJs
首先进入node官网,去下载最新版的nodeJs
webpack
安装webpack
参数-g表示全局安装webpack,你在cmd命令中哪个文件夹下都可以使用webpack的命令,如果不加-g的话,是只可以在你安装webpack的目录下使用webpack这个命令
webpack 也有一个 web 服务器
-g道理同上
配置webpack
1、先确认一下项目的目录结构
2、配置webpack.config.js
在使用webpack的时候,需要创建一个名为 webpack.config.js 的配置文件,这个文件在安装webpack的时候,是不会自动创建的,是需要手动创建,文件的位置要放在当前安装webpack根目录下
entry: path.resolve(dirname,'./app/app.js'),output: {
path: path.resolve(dirname,'./build'),filename: 'js/build.js'
},module: {
loaders: [{
test: /.js|.jsx?$/,exclude: /node_modules/,loader: 'babel-loader',query: {
presets: ['es2015','react']
}
}]
}
}
这是一个简单的webpack的配置,首先先引用了path对象。
entry是一个入口文件,在这个文件中的所有内容,会被打包到output指定目录的指定文件当中。
path.resolve是一个来格式化路径的方法,path.resolve的方法参数有两个path.resolve(from,to),from这里的__dirname是为了获取当前模块文件所在的目录,to这里的./app/app.js是一个相对路径,ouput是出口,ouput中的path和entry的方法同理,这里不做赘述。
filename是指向一个指定文件,入口打包的所有文件,最后代码都会在这个出口文件中看到。
module中添加的loaders这个数组,里面的对象是用来转换模块的,现在这里只添加了一个js的模块,用来转换es6语法和react
这个时候,还需要安装一个 babel-loader
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev