<think>我们注意到用户的需求是搭建AngularJS（即Angular1.x）的开发环境，而不是Angular（2+）。之前的回答中提到了AngularCLI，但AngularCLI仅适用于Angular2+，不适用于AngularJS。因此需要调整。在
Windows系统下
使用IntelliJIDEA配置AngularJS开发环境并编译的步骤：1.**环境准备**：-
安装Node.js
和npm（因为可能需要
使用npm来管理依赖
和构建工具）-
安装Git（可选，用于版本控制，有时项目可能需要）2.**创建项目**：-打开IDEA，选择File->New->Project-选择“EmptyProject”或者“StaticWeb”（如果
使用Ultimate版本）->选择“StaticWeb”（如果没有，可以选择EmptyProject，然后手动添加文件）-设置项目名称
和位置，创建项目。3.**添加AngularJS库**：-在项目根目录下，创建`lib`文件夹（或者`js`文件夹），用于存放第三方库。-下载AngularJS的库文件（可以从官网或CDN获取）并放入`lib`文件夹，或者通过npm
安装（推荐
使用npm管理）。-
使用npm
安装AngularJS：```bashnpminit-y#初始化项目，生成package.jsonnpm
installangular--save```-
安装后，AngularJS库位于`node_modules/angular`目录下，可以在项目中引用。4.**项目结构**（示例）：```project-root/├──node_modules/#通过npm
安装的依赖├──src/#源代码目录│├──app.js#AngularJS模块定义│├──controllers/#控制器目录│├──services/#服务目录│└──index.html#主页面├──package.json#npm项目文件└──...```5.**编写代码**：-在`src/index.html`中引入AngularJS：```html<!DOCTYPEhtml><htmlng-app="myApp"><head><title>AngularJSProject</title><scriptsrc="../node_modules/angular/angular.min.js"></script><scriptsrc="app.js"></script></head><body><divng-controller="MyController">{{message}}</div></body></html>```-在`src/app.js`中定义模块
和控制器：```javascriptangular.module('myApp',[]).controller('MyController',function($scope){$scope.message="HelloAngularJS!";});```6.**配置IDEA运行**：-右键点击`index.html`->选择“OpeninBrowser”（可以选择默认浏览器），或者配置一个运行配置：-点击“EditConfigurations”->点击“+”->选择“JavaScriptDebug”->选择“index.html”文件作为启动页面。-这样运行后，浏览器会打开该页面，并显示“HelloAngularJS!”。7.**编译（构建）**：-AngularJS项目通常不需要复杂的编译，因为它是纯前端框架，直接由浏览器解释执行。-但是，为了优化（如代码压缩、合并等），可以
使用构建工具（如Webpack、Gulp等）进行构建。这里以
使用Webpack为例：-
安装Webpack及相关loader：```bashnpm
installwebpackwebpack-cli--save-devnpm
installbabel-loader@babel/core@babel/preset-env--save-devnpm
installhtml-webpack-plugin--save-devnpm
installcss-loaderstyle-loader--save-dev```-创建Webpack配置文件`webpack.config.js`（在项目根目录）：```javascriptconstpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:'./src/app.js',output:{path:path.resolve(__dirname,'dist'),filename:'bundle.js'},module:{rules:[{test:/\.js$/,exclude:/node_modules/,use:{loader:'babel-loader',options:{presets:['@babel/preset-env']}}}]},plugins:[newHtmlWebpackPlugin({template:'./src/index.html'})]};```-修改`package.json`，添加构建脚本：```json"scripts":{"build":"webpack--modeproduction"}```-运行构建：```bashnpmrunbuild```-构建结果将输出到`dist`目录，包含压缩后的JS
和HTML。8.**常见问题**：-如果IDEA无法识别AngularJS语法，可以
安装AngularJS插件：-进入File->Settings->Plugins->搜索“AngularJS”->
安装并重启IDEA。-如果遇到跨域问题（比如
使用`file://`协议打开页面），建议
使用本地服务器（如`http-server`）：```bashnpm
install-ghttp-serverhttp-serverdist#在dist目录下启动服务器```注意：以上步骤是针对AngularJS（1.x）的，与Angular（2+）
使用AngularCLI不同。引用说明：[^1]:参考了IDEA创建新项目时选择AngularCLI的步骤（但注意这里我们并没有
使用，因为用户需要的是AngularJS）。[^2]:参考了在IDEA中配置运行环境的方法。相关问题：1.AngularJS项目如何实现模块化开发？2.如何
使用Webpack优化AngularJS应用的加载性能？3.在AngularJS中如何实现组件化？4.AngularJS与后端API交互时如何处理跨域问题？</think>### 在
Windows 系统
使用 IntelliJ IDEA 配置 AngularJS 开发环境并编译
#### 一、环境准备
1. **
安装 Node.js
和 npm**
- 访问 [Node.js 官网](https://nodejs.org/) 下载
Windows 安装包
-
安装后验证（CMD 中执行）：
```bash
node -v # 查看 Node.js 版本
npm -v # 查看 npm 版本
```
2. **配置 npm 镜像源（可选）**
```bash
npm config set registry https://registry.npmmirror.com
```
#### 二、IDEA 配置步骤
1. **创建空项目**
- `File` → `New` → `Project` → `Empty Project`
- 设置项目名称
和路径（如 `D:\angularjs-demo`）
2. **添加 AngularJS 库**
- **方法1（推荐）**：通过 npm
安装
```bash
npm
install angular --save
```
- **方法2**：手动下载
访问 [AngularJS CDN](https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js) 下载文件
将 `angular.min.js` 放入项目 `lib` 目录
3. **项目结构创建**
```
project-root/
├── lib/
│ └── angular.min.js # AngularJS 库文件
├── src/
│ ├── app.js # 主模块文件
│ └── index.html # 入口页面
├── package.json # npm 配置文件
└── node_modules/ # 依赖目录
```
4. **编写示例代码**
- `index.html` 内容：
```html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="../lib/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
{{ message }}
</div>
</body>
</html>
```
- `app.js` 内容：
```javascript
angular.module('myApp', [])
.controller('MainCtrl', function($scope) {
$scope.message = "Hello AngularJS!";
});
```
5. **配置运行环境**
- 右键点击 `index.html` → `Open in Browser` → 选择浏览器
- 或配置 `JavaScript Debug`：
`Run` → `Edit Configurations` → `+` → `JavaScript Debug` → 指定 `index.html` 路径
#### 三、编译与优化（
使用 Webpack）
1. **
安装构建工具**
```bash
npm
install webpack webpack-cli babel-loader @babel/core css-loader style-loader html-webpack-plugin --save-dev
```
2. **创建 `webpack.config.js`**
```javascript
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: { loader: 'babel-loader' }
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
```
3. **添加构建命令**
在 `package.json` 中添加：
```json
"scripts": {
"build": "webpack --mode production"
}
```
4. **执行编译**
```bash
npm run build # 生成优化后的代码到 dist/ 目录
```
#### 四、调试技巧
1. **浏览器开发者工具**
- 按 `F12` 打开 → `Sources` 标签 → 设置断点
-
使用 `console.log()` 输出调试信息
2. **IDEA 调试配置**
- `Run` → `Edit Configurations` → `JavaScript Debug`
- 指定启动 URL（如 `http://localhost:63342/project-root/src/index.html`）
#### 五、常见问题解决
1. **AngularJS 未加载**
- 检查文件路径：确保 `angular.min.js` 路径正确
- 网络加载：
使用 CDN 链接测试
```html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
```
2. **依赖未识别**
- 在 IDEA 中：右键 `node_modules` → `Mark Directory as` → `Library Root`
3. **端口冲突**
- 修改调试端口：`Edit Configurations` → 修改 `Port`
> **注意**：AngularJS（1.x）与 Angular（2+）不同，无需 Angular CLI。生产部署时建议：
> -
使用 UglifyJS 压缩代码：`npm
install uglifyjs-webpack-plugin --save-dev`
> - 添加版本哈希避免缓存：`filename: 'bundle.[hash].js'`[^1]
本文介绍如何在NodeJS环境下安装并使用UglifyJS进行JavaScript代码的压缩与美化，包括NodeJS的安装配置、UglifyJS的安装及配置步骤。
扫一扫
1407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
