一. 常见打包工具的介绍
在打包工具中,常见的有RequireJS,browserify,webpack,其中RequireJS是一个JavaScript模块加载器,基予ADM(async module define)规范实现,browserify是一个以在浏览器中使用Node.js模块为出发点的工具,而webpack则是一个为前端模块打包构建而生的工具.
二. 工具的使用
(1)作为npm包的RequireJS提供了一个可执行的r.js工具,通过命令行执行,使用方式如下:
npm install -g requirejs r.js -o app.build.js
(2)browserify提供的命令行工具,使用如下面所示:
npm install -g browserify browserify main.js -o bundle.js
(3)webpack的使用
如下面所示,使用命令进行安装与使用,如下所示:
npm install webpack -g webpack main.js -o bundle.js
在上面命令行中,我们进行了简单的全局安装webpack和对main.js文件的打包操作
三. 项目构建
对前端项目来说,webpack扮演的是构建工具的角色,并不是代码依赖,应该被安装在dev-dependencies中,使用如下命令进行安装:
npm install webpack --save-dev
在这个示例中,将进行简单应用的构建,包括两个js模块
1.生成文本”Hello world”的hello模块(hello.js)
module.exports = 'Hello world';
2.打印文本的index.js模块(index.js)
var text = require('./hello'); console.log(text);
和用于在前端浏览器中显示内容的index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="https://www.jb51.net/article/bundle.js"></script> </body> </html>
在上面的src路径引入的bundle.js文件是不存在的,因为还没有创建,在使用webpack进行创建打包之后的js文件,如下面所示命令进行创建:
webpack ./index.js bundle.js
在执行完上面命令之后,我们就可以在浏览控制台中看到打印出的结果 Hello world
这样,我们就实现了简单项目的实现原理,打包内容为bundle.js,我们能够看到打包之后的内容,在这里就不贴代码了.
当然,如果我们写代码都是这样去构建,那么,作用意义也不大,这就不得不提及webpack的另外一个优点了,那就是配置文件的使用,在使用配置文件之前,我们在进行安装样式加载器,如下面命令:
npm install style-loader css-loader --save-dev
通过上面的配置,我们就能够进行样式的加载
然后我们进行webpack配置文件设置,需要首先在项目下创建文件webpack.config.js文件,其中内容如下所示:
var path = require('path'); module.exports = { entry: path.join(__dirname, 'index'), output: { path: __dirname, filename: 'bundle.js' }, module:{ loaders: [ { test: /\.css$/, loaders: ['style-loader', 'css-loader'] } ] } };
在上面代码中,
* entry: 表示项目的入口文件
* output: 表示构建打包之后的结果输出,在输出的对象中仍有多项配置比如上面所使用的输出路径和输出文件名
* module.loaders是对于模块中的loader使用的配置,值为一个数组,数组的每一项指定一个规则,规则的test字段是正则表达式,若被依赖模块的ID符合该正则表达式,则对依赖进行使用loader转换.这样,我们就能够使用webpack命令进行代码的转换
更多详细说明请参见(https://www.jb51.net/article/136710.htm)
如下面命令行命令就可以进行代码的打包工作webpack
通过执行上面命令,同样能够实现文件的打包,并且,在显示文件时也能够将样式进行显示,为了证明样式确实能够被引入,我们进行创建index.css文件,其中内容如下所示:
body { background-color: darkgray; }
然后在我们之前创建的index.js中引入,修改之后的代码如下所示:
// import style from './index.css'; var style = require('./index.css'); var text = require('./hello'); console.log(text);
在上面代码中,注释掉的是node模块的导入形式,而使用中的是CommonJS的使用规范,使用同样的命令打包之后,我们能够在浏览器中看到如下效果:
也就是样式进行了展现.
当然,webpack也能够通过webpack-dev-server进行项目的实时构建.
使用如下命令进行webpack-dev-server的安装:
npm install webpack-dev-server --save-dev
在安装之后,我们能够配置使用服务器,首先,我们的package.json文件将会更为下面这样,新增内容为:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":"webpack-dev-server --inline" },
在添加完这行命令之后,我们就可以使用下面命令进行启动webpack-dev-server服务器了,
npm run start
之后完整的package.json为如下: