小程序作为移动互联网应用的重要分支，在近年来越来越受到开发者的青睐。随着微信小程序平台的逐渐完善，越来越多的人开始学习和开发小程序。在这个过程中，搭建小程序开发环境非常关键。本文将介绍如何搭建weapp小程序开发环境。
首先需要安装Node.js 包管理器NPM组件，可以通过官网（https://nodejs.org/）进行下载安装。在MacOS或Linux 操作系统下，可以使用apt-get + Node.js查看是否安装：
```
node -v
npm -v
```
确保版本为合适的版本即可。之后，我们还需要安装小程序开发工具IDE，可以通过下载安装包（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html）进行下载并安装。
安装完开发工具后，我们需要创建一个新的小程序项目。在开发工具中，点击“新建项目”，并输入小程序的相关信息，包括小程序的AppID、项目名称、项目路径等。创建完毕后，开发工具会生成一些文件和目录，用于小程序的整个开发过程。
在小程序项目的目录下，我们可以看到一些默认的目录和文件：
```
├── app.js
├── app.json
├── app.wxss
├── pages
│ ├── index
│ │ ├── index.js
│ │ ├── index.wxml
│ │ └── index.wxss
└── utils
└── util.js
```
其中，app.js是小程序的入口文件，app.json是小程序的配置文件，app.wxss是小程序的样式文件，pages目录是存放小程序页面的目录等等，utils目录是存放小程序内部需要公用的函数等等。
除了以上文件以外，我们需要额外配置开发过程中用到的一些工具。比如，将ES6、Less等语法编译成小程序可以执行的语法。因此，我们需要引入开发工具内置的自动构建工具，并在配置文件中增加自定义配置，告诉开发工具该如何处理不同类型的文件。
在开发工具中，我们可以找到“项目”=>“项目设置”=>“构建npm”选项。勾选上“使用npm模块”即可启用。之后，我们需要在命令行中进入小程序项目的根目录下，执行以下命令：
```
npm init
npm install wepy-cli -D
npm install less autoprefixer cssnano less-loader -D
```
安装完毕后，我们需要在项目根目录下创建一个名为wepy.config.js的文件：
```
const path = require('path')
const Less = require('less')
module.exports = {
wpyExt: '.wpy',
eslint: true,
cliLogs: true,
build: {},
resolve: {
alias: {
'@utils': path.join(__dirname, 'src/utils')
}
},
compilers: {
less: {
compress: true,
plugins: [new Less.Plugin.AutoPrefixer({ browsers: ['iOS >= 8', 'Android >= 4.1'] }), new Less.Plugin.CleanCSS({ advanced: true })]
},
/* sass: {
outputStyle: 'compressed'
}, */
babel: {
sourceMap: true,
presets: [
'env'
],
plugins: [
'transform-class-properties',
'transform-decorators-legacy',
'transform-object-rest-spread'
]
}
},
plugins: {},
appConfig: {
noPromiseAPI: ['createSelectorQuery']
}
}
```
在配置文件中，我们配置了wepy-cli编译小程序的后缀名、支持ESlint语法检查、cli日志输出、自定义地址别名等等。同时，我们还配置了less、autoprefixer和cssnano等插件，用于less语法的编译和浏览器兼容性处理。开发者可以自行按需添加其他插件，进行扩展和定制化。
到这里，我们已经完成了weapp小程序的开发环境的搭建，下一步就是在该环境下进行小程序的开发。
