nodejs项目结构

使用webpack创建NodeJS项目结构,可以简化和标准化NodeJS项目结构,当然对react、redux框架可适用。

首先需要有nodejs环境,然后创建一个目录,用npm初始化项目,并在本地安装webpack、webpack-cli(用于在命令行上运行webpack的工具):

--shell--mkdir webpack-demo

cd webpack-demo

npm init -y

npm install webpack --save-dev

npm install webpack-cli --save-dev

创建nodejs项目结构

现在将创建以下目录结构,文件及其内容:

--io--  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

--markup--<!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

--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。

创建webpack dist目录

现在需要略微调目录结构,将/src与/dist分开。“src”目录下的内容为源代码。“dist”目录下是构建后的最小化和优化代码,最终将在浏览器中加载:

项目结构

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

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

--shell--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文件使用打包后的脚本:

--markup--<!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作为输出:

--shell--npx webpack

在浏览器中打开index.html,如果一切正常,应该看到以下文本:

--io--'Hello webpack'

webpack配置

项目结构

--io--  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构建:

--io--npx webpack --config webpack.config.js

修改NPM构建脚本

package.json

 --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构建命令

--shell--npm run build

结论

既然已经有了基本的构建,此时,项目结构应如下所示:

项目结构

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

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

到此,webpack目录结构基本完成,真实的项目还会有其他资源目录,如:css、image,所以,可以在src目录下加入相应的资源目录。