项目简介:
该项目主要是对npm指令和webpack的简单入门,以及对react的基本知识点的灵活运用。接下来将先普及知识点,然后从实验入手,详细记录该项目的操作流程。
本节实验主要是手动打包,熟悉webpack这个流程。
相关知识简介:
1.webpack
webpack是一个前端资源加载、打包工具,前端常用资源都可以作为一个模块导出,我们在代码中直接引用即可,最后按照我们的配置把代码打包整合起来。
webpack的配置信息(最简单的例子):
Module.exports = {
entry: ‘./entry.js’, 入口文件(作用是:将入口文件告诉webpack后,webpack从入口文件入手,分析所有的require依赖,把所有的资源整合回来,打成一个包)
output:{ 输出(作用:告诉webpack最后生成的包文件所放的位置,定义path文件夹,定义filename文件名)
path:’./dist’,
filename:’bundle.js’
},
module:{
loaders:[
{
test:/.js[x]?.$/, 正则匹配文件名js或者jsx结尾的
loader:[‘babel’] 前端js或者jsx资源
},
{
test:/.css$/, 正则匹配所有以css结尾的
loaders:”style!css” 前端css资源
}
]
}
}
2.package.json文件
代码分析都需要从package.json入手。package.json里面有如下的配置信息:
- name: 系统的名称
- version:系统的版本
- description:系统的说明
- scripts:代表怎么去运行这个系统
- dependencies:系统开发中所需要的代码级别依赖
- devDependencies:系统运行的时候所需要的依赖
此外需要注意的是:
webpack.json.js 里面存放的是一些配置说明
app文件夹下放主要代码
dist文件夹是最后产出的文件,其中存放的就是html+css加上静态资源
具体环境的搭建步骤如下:
1.创建一个空文件夹名为react-music-player
2.创建并配置package.json
2.1创建package.json
通过在命令行输入 npm-init指令
2.2基本信息的配置
-
-
- 设置name(项目名称) ,version(默认版本号),description(项目描述)的具体内容
- 设置entry point(入口文件)为app/index.js
- 由于不需要添加测试案例,所以直接跳过test command
- git repository:如果项目在git上,直接输入git的地址,否则跳过
- 设置keywords(项目关键词)
- 设置author:自己的名字
- 设置license
-
2.3 dependencies的安装
dependencies的安装,我们通过npm工具,无需手动敲。需要注意的是:
-
-
- npm install react --save,表示安装以后依赖自动写入dependencies中
- 依赖信息:“react:’”^15.6.1””, 其中^15.6.1表示的是版本信息
- npm install语句做了哪些事情? npm 此时会去找到 package.json中的所有依赖,然后一一安装到node_modules下面。例如:从git中下载的项目是没有node_modules这个文件夹的,需要我们通过npm install指令去自动生成这个文件夹, 然后将依赖放到这个文件夹下面
-
3.配置webpack
3.1新建一个名为webpack.config.js的文件(这是webpack中默认的配置文件名)
3.2配置entry 和output
3.3新建dist, app文件夹,以及index.js入口文件
3.4index.js文件内容的填充
webpack帮我们进行资源的导入,包括用npm安装的一些依赖模块。假设我们需要导入react, var React=Require('react')
用es6语法进行导入: import React from 'react'.注意,使用npm安装的依赖项不需要写相对路径,直接写名字即可
我们这边用如下的代码先测试一下:
import React from 'react'
console.log(React.version)
3.5执行webpack进行打包
在进行webpack打包的时候你可能会遇到问题:‘./dist’ is not an absolute path?
解决方案如下:
- 引入NodeJS中的path
var path = require('path')
- 使用path.join方法或者path.resolve方法来创建一个绝对路径 webpack.config.js文件
var path = require('path'); module.exports={ entry:path.join(__dirname,'app','index.js'), output:{ path: path.join(__dirname,'/dist'), filename: 'bundle.js' } }
3.6新建一个html文件,将刚刚打包的文件进入进来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First React Project</title>
</head>
<body>
<script type="text/javascript" src='../dist/bundle.js'></script>
<div>
Hello
</div>
</body>
</html>
3.7配置loader(webpack.config.js文件)——需要注意的是这些都需要通过npm 去安装
常用的loader有以下三个:
Babel-loader(将ES6语法转为ES5)
css-loader
less-loader
具体可以参阅:http://webpack.github.io/docs/using-loaders.html
module:{ loaders:[ { test:/.js$/, //test表示匹配的文件,正则表达式式的意思就是匹配所有以.js结尾的文件,也就是所有的js文件,webpack都会用babel去处理 exclude:/node_modules/, //exclude表示哪些文件不需要处理,例如npm里面安装的node_modules依赖库 loader:"babel-loader", //loader的内容是"babel-loader" query:{ presets:['react','es2015'] } }, { //告诉webpack如何处理css文件 test:/.css$/, loader:"style!css" }, { //告诉webpack如何处理less文件 test:/.less$/, loader:"style-loader!css-loader!less-loader" } ] },