7 1学会使用 Node 编写简单的前端应用

153 阅读1分钟
1.创建一个目录
$ mkdir simple-app-demo
$ cd simple-app-demo
2.在该目录下,新建一个package.json文件

使用命令行来新建

$ npm init -y

package.json 是项目的配置文件。

3.安装 jquery 和 webpack 这两个模块
 $ npm install -S jquery
 $ npm install -S webpack

打开 package.json 文件,会发现 jquery 和 webpack 都加入了 dependencies 字段,并且 带有版本号。

4.在项目根目录下,新建一个网页文件index.html
<html> 
<body>
    <h1>Hello World</h1>
    <script src="bundle.js"></script> 
</body>
</html>
5.在项目根目录下,新建一个脚本文件 app.js
const $ = require('jquery'); 
$('h1').css({ color: 'red'})

上面代码中, require 方法是 Node 特有的模块加载命令。

6.打开 package.json ,在 scripts 字段里面,添加一行
 "scripts": {
"build": "webpack app.js bundle.js",
"test": "...."
7. 在项目根目录下,执行下面的命令,将脚本打包
$ npm run build

执行完成,可以发现项目根目录下,新生成了一个文件 bundle.js

8.浏览器打开index.html ,可以发现 Hello World 变成了红色。