npm 构建失败_使用npm作为构建工具

npm 构建失败

Every developer will love this saying "It is hard to build a software without using a build tool." To get rid of the repetitive tasks, we are using build tools. If you think Gulp has killed Grunt you may want to think about another tool because npm has surpassed both.

每个开发人员都会喜欢这样的说法：“不使用构建工具就很难构建软件。” 为了摆脱重复的任务，我们使用了构建工具。 如果您认为Gulp杀死了Grunt，那么您可能想考虑另一种工具，因为npm已超越了两者。

Now Node provides a great way to implement a build process with only npm.

现在，Node提供了一种仅使用npm即可实现构建过程的好方法。

Imagine a situation where using build tools makes you horrible, I felt the same thing when I use Grunt and Gulp. Now that I have been using npm as a build tool, I feel more comfortable. Here I will share with you how to do the same and make yourself comfortable while using the build tool.

试想一下的情况下使用构建工具让你太可怕了 ，我有同样的感觉，当我使用步兵和咕嘟咕嘟。 既然我一直在使用npm作为构建工具，我会感到更加自在 。 在这里，我将与您分享如何做同样的事情，并让您在使用构建工具时自如。

At the end of this article, we will be making our own boilerplate.

在本文的结尾，我们将制作自己的样板。

使用他人的缺点： ( Drawbacks of using others: )

When using Grunt or Gulp, the packages specific to that build tool are usually just wrappers on the main package. For instance, gulp-sass is really a Gulp specific wrapper to node-sass. We can go straight to the source and just use node-sass with npm!

使用Grunt或Gulp时，特定于该构建工具的软件包通常只是主软件包上的包装器。 例如， gulp-sass实际上是node-sass特定于Gulp的包装器。 我们可以直接到源代码，仅将node-sass与npm一起使用！

There are drawbacks of using Grunt/Gulp specific packages.

使用特定于Grunt / Gulp的软件包有一些缺点。

1. We need to watch the versions of each sub modules which we are using. If anything gets updated or removed we have to look for another one to achieve the same. But here with npm, no such problem will come.

   我们需要观察正在使用的每个子模块的版本。 如果有任何更新或删除，我们必须寻找另一个来达到相同的目的。 但是在使用npm时 ，不会出现此类问题。

2. Adding new tasks into build tool will increase dependencies. But here we can use normal command prompt command like '&&' to combine multiple tasks.

   在构建工具中添加新任务将增加依赖性。 但是在这里，我们可以使用普通的命令提示符命令（例如“ &&”）来组合多个任务。

3. Custom script file like* (Gruntfile.js)* for tasks. Here only package.json file is enough.

   用于任务的自定义脚本文件，例如*（Gruntfile.js）*。 在这里，仅package.json文件就足够了。

4. Doesn't support any commands which we use in command prompt. Here you can use all commands into your package.json file.

   不支持我们在命令提示符下使用的任何命令。 在这里，您可以使用所有命令进入您的package.json文件。

npm脚本的类型 ( Types of npm scripts )

1. Default scripts
   默认脚本
2. Custom scripts
   自定义脚本

入门 ( Getting started )

Let's start our build commands!

让我们开始构建命令！

1. Create an empty directory and initialize it as npm using npm init. It will ask you to construct your package.json file. If you feel lazy like me to hit enter many times, then go with shorthand script npm init --yes.

   创建一个空目录，并使用npm init将其初始化为npm 。 它将要求您构造package.json文件。 如果您想像我一样懒惰多次击回车键，请使用简写脚本npm init --yes 。

2. Now check your directory, a package.json file gets created like this :

   现在检查您的目录，像这样创建一个package.json文件：

{
  "name": "your_directory_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

1. By default, a test script will get created inside the script object. Inside the script object, we are going to configure our tasks.

   默认情况下，将在脚本对象内创建测试脚本。 在脚本对象内部，我们将配置任务。

2. Run the default task using npm test shorthand for npm run test

   使用npm test速记来npm run test的默认任务

It states that node_modules missing. We have to add our dependencies.

它指出node_modules丢失。 我们必须添加我们的依赖项。

1. Let's install dev-dependencies first :
   让我们先安装dev-dependencies：

$npm i -D jshint lite-server mocha concurrently node-sass uglify-js

1. Let's start creating our scripts :
   让我们开始创建脚本：

"scripts": {
  ...
  "dev": "lite-server"
}

npm run dev - I have used it as a development server. It will take care of live-reloading and Browser-sync (since it is sub-module of lite-server, no need to install it separately). We don't need to configure a watch property for all your files like (HTML, CSS, JS).

npm run dev我已将其用作开发服务器。 它会处理实时重新加载和浏览器同步（因为它是lite-server的子模块，因此无需单独安装）。 我们不需要为所有文件（如HTML，CSS，JS）配置watch属性。

Browser-sync will help you with cross-browser checking. To know more about lite-server refer docs.

浏览器同步将帮助您进行跨浏览器检查。 要了解有关lite-server的更多信息，请参考docs 。

"scripts": {
    ...
    "db": "json-server --watch db.json --port 3005"
  }  

npm run db - If you want to know more about JSON-Server refer my *article*.

npm run db如果您想了解有关JSON服务器的更多信息，请参阅我的* 文章 *。

"scripts": {
    ...
    "start": "concurrently -k \"npm run dev\" \"npm run db\""
  }  

npm start shorthand for npm run start. Concurrently, using it we can perform two tasks simultaneously. You can also combine both the tasks using '&&' operator. To know more about it refer docs.

npm start是npm run start简写。 同时，使用它我们可以同时执行两个任务。 您也可以使用“ &&”运算符将两个任务组合在一起。 要了解更多信息，请参阅docs 。

"scripts": {
   ...
   "uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js"
  }  

npm run uglify - It will minify your JavaScript files and move it into your desired directory. It will create a new folder only if it does not already exist (-p flag).

npm run uglify它将缩小您JavaScript文件并将其移至所需目录。 仅当它不存在时，它才会创建一个新文件夹（ -p标志 ）。

"scripts": {
    ...
    "lint": "jshint src/**.js"
  }  

npm run lint - It will look for any JavaScript files inside the source folder and helps detect errors and potential problems in your JavaScript code.

npm run lint它会在源文件夹中查找所有JavaScript文件，并帮助检测JavaScript代码中的错误和潜在问题。

"scripts": {
  ...
  "sass": "node-sass --include-path scss scss/main.scss assets/main.css"
}

npm run sass - It allows compiling your .scss files to CSS automatically and at a good speed.

npm run sass它可以自动将您的.scss文件快速编译为CSS。

"scripts": {
  ...
  "test": "mocha test"
}

npm test shorthand for npm run test. Mocha is a JavaScript test framework, which helps you to write test cases.

npm test是npm run test简写。 Mocha是一个JavaScript测试框架，可帮助您编写测试用例。

"scripts": {
  ...
  "bash": "Location of the Bash/Shell script file"
}

npm run bash - If you think you're making a lot of commands inside the scripts object, you can make it as Bash/Shell script and include it in your package.json file as like above.

npm run bash如果您认为要在scripts对象中执行许多命令，则可以将其作为Bash / Shell脚本并将其包含在package.json文件中，如上所述。

样板 ( Boilerplate )

So far we have seen the basic npm build commands and explanation for them. Let's start to prepare our own boilerplate. Using this boilerplate will save your time on preparing build tool. Invest more time on building your app.

到目前为止，我们已经看到了基本的npm build命令及其说明。 让我们开始准备自己的样板 。 使用此样板将节省您准备构建工具的时间。 花更多的时间来构建您的应用程序。

"scripts": {

  "start": "concurrently -k \"npm run dev\" \"npm run watch-css\"",

  "dev": "lite-server",
  "db": "json-server --watch db.json --port 3005",

  "build-js": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js",

  "lint": "lint jshint src/**/**.js",

  "build-css": "node-sass --include-path scss scss/main.scss assets/main.css",
  "watch-css": "nodemon -e scss -x \"npm run build-css\"",

  "test": "mocha test",
  "pretest": "npm run lint",
  "posttest": "echo the test has been run!",

  "bash": "Location of the bash/shell script file"
}

This boilerplate will take care of all the necessary things which we need during development phase like:

这个样板将照顾我们在开发阶段所需的所有必要的东西，例如：

1. npm run dev- Bootstraps our app, opens it in the browser, reloads the browser whenever we make changes in source.

   npm run dev引导我们的应用程序，在浏览器中打开它，并在我们更改源代码时重新加载浏览器。

2. build-js- Minifies all our JavaScript files, which will be needed during production.

   build-js js-缩小我们所有JavaScript文件，这在生产过程中将是必需的。

3. watch-css- Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Here I have used it to monitor for any changes in the .scss file, if there are changes, it will restart the server and build our css.

   watch-css -Nodemon是一个实用程序，它将监视源中的任何更改并自动重新启动服务器。 在这里，我使用它来监视.scss文件中的任何更改，如果有更改，它将重新启动服务器并构建我们CSS。

"scripts": {
  "test": "echo I am test",
  "pretest": "echo I run before test",
  "posttest": "echo I run after test"
}

1. npm test- It wraps the above three commands *"pretest test posttest"* and executes them in the order I have listed. Initially when you hit npm test it will look for pretest command. If it is there, it gets executed first, followed by test and then posttest. During the look up if it doesn't find pretest command it will directly execute the test command.
   npm test包装以上三个命令*“ pretest test posttest” *，并按照我列出的顺序执行它们。 最初，当您按下npm test ，它将寻找pretest命令。 如果存在，它将首先执行，然后是test和posttest 。 在查找过程中，如果找不到预测试命令，它将直接执行测试命令。

The remaining commands I have explained it in the previous section. You can also customize this boilerplate based on your needs.

我在上一节中已经解释过的其余命令。 您也可以根据需要自定义此样板。

结论 ( Conclusion )

I hope this article has saved your time while preparing a build tool. Now we have prepared our own boilerplate for npm as a build tool. I hope now you will accept npm has killed both Grunt and Gulp. Feel free to use my boilerplate and contributions are welcome. Further, you can refer official npm scripts.

我希望本文能够节省您准备构建工具的时间。 现在，我们已经为npm准备了自己的样板作为构建工具。 我希望您现在接受npm杀死了Grunt和Gulp。 随时使用我的样板 ，欢迎您提供帮助。 此外，您可以参考官方的npm脚本 。

If you have any queries, please let me know in comments.

如有任何疑问，请在评论中让我知道。

翻译自: https://scotch.io/tutorials/using-npm-as-a-build-tool

npm 构建失败