nodejs项目结构

使用webpack进行构建,简化和标准化nodeJS项目结构。

创建一个目录,使用npm初始化项目:

mkdir webpack-demo

cd webpack-demo

npm init -y

安装webpack、webpack-cli:

npm install webpack --save-dev

npm install webpack-cli --save-dev

项目结构

目录结构:

webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js

function component() {
  const element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}
document.body.appendChild(component());

index.html

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

package.json

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.20.2",
      "webpack-cli": "^3.1.2"
    },
    "dependencies": {}
  }

调整package.json文件确保将package.json标记为private,并删除main条目,防止意外发布代码。

正常开发可不必在意,如果设置了此参数而又被遗忘,就会引发许多未知问题。

示例中<script>标记间存在隐式依赖关系,index.js文件依赖于lodash。

这是因为index.js未明确声明需要lodash。

dist目录

现在需要略微调目录结构,将/src与/dist分开。

“src”目录下的内容为源代码。

“dist”目录下是构建后的最小化和优化代码。

项目结构

webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

首先,在本地安装lodash依赖库:

npm install --save lodash

然后,在index.js中导入lodash依赖模块:

+ import _ from 'lodash';
+
  function component() {
    const element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

现在,在index.html文件使用打包后的脚本:

<!doctype html>
  <html>
   <head>
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
  </html>

运行npx webpack,它会执行如下脚本:

./node_modules/.bin/webpack

脚本将src/index.js作为入口点,并生成dist/main.js作为输出:

npx webpack

在浏览器中打开index.html,应看到如下文本:

'Hello webpack'

配置

项目结构

webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

再次运行webpack:

npx webpack --config webpack.config.js

修改NPM构建脚本

package.json

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "scripts": {
-      "test": "echo \"Error: no test specified\" && exit 1"
+      "test": "echo \"Error: no test specified\" && exit 1",
+      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.20.2",
      "webpack-cli": "^3.1.2"
    },
    "dependencies": {
      "lodash": "^4.17.5"
    }
  }

运行npm构建命令:

npm run build

结论

项目结构

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- main.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

如果使用npm5,目录中还会看到一个package-lock.json文件。

src目录还可能包含其他资源,如:css、image。