A modern JS Web project development environment is actually a Nodejs application, through the use of a series of tools to complete a variety of tasks in the development process, so now to complete the development of a project can not just knock on the code, but also must master some modern engineering methods and tools. In this article, some common tools and methods are simply sorted out.

Basic tools and concepts

Package management

JS projects usually start with the installation of dependencies by executing the NPM I XXX command. In practice, it is better to use CNPM instead of NPM, which is much faster and has fewer errors. Install to distinguish between dependencies (-s or –save), devDependencies (-d or –save-dev), peerDependencies. All three methods install the package in node_modules, but in package.json in the corresponding field object.

Dependencies is a package that the production environment depends on, and devDependencies is a package that the development environment depends on. If the project is the final application, you can’t tell the difference between the two methods, but if you are developing libraries that are dependent on other projects, only Dependencies are installed when you execute Install, not devDependencies.

If your library needs to rely on package A, but you don’t want to install package A in your own directory when referenced by other projects, and instead use package A in your project, put that package in peerDependencies. The main purpose of this approach is to solve the problem of version consistency and static initialization. Nodejs searches for node_modules files from the current directory, but if there are two files with the same name, follow the nearest rule. This can result in inconsistent versions of a package being used across the application. If package A contains statically initialized code (for example, creating A global object), this will result in multiple executions, causing conflicts.

Reference: docs.npmjs.com/files/packa…

Reference: nodejs.org/dist/latest…

Babel

Babel is a Javascript compiler that processes code through plugin pairs. Babel’s plug-ins are numerous, and preset represents the set of plug-ins.

A plug-in is a package in NPM that is named directly in the Babel configuration file.

{
  "plugins": ["babel-plugin-myPlugin"]}Copy the code

The name of the plug-in can be omitted if it starts with babel-plugin-.

{
  "plugins": ["myPlugin"]}Copy the code

If multiple plug-ins or preset are set, the order of execution is:

  1. Plugins have priority over prefabrication;
  2. Plug-ins are executed from front to back;
  3. Prefabrication is performed from back to front.

Both plug-ins and presets can specify parameters.

{
  "plugins": [["pluginA"}, {}]]Copy the code

Reference: babeljs. IO/docs/en/bab…

prettier

Prettier is a code formatter that sets line width, indent space, trailing semicolon, and so on.

Reference: prettier. IO/docs/en/opt…

ESLint

ESLint is a plug-in Javascript code checker that helps find syntax and formatting problems in code.

CNPM I eslint -d # Install ESlint –init # initialize

ESLint uses Espree as its parser by default. You can specify a different parser in the configuration file, for example: babel-eslint.

{
    "parser": "esprima"."rules": {
        "semi": "error"}}Copy the code

An environment defines a predefined set of global variables.

{
    "env": {
        "browser": true."node": true}}Copy the code

ESLint comes with a lot of rules. You can use comments or configuration files to modify the rules to be used in your project. To change a rule setting, you must set the rule ID to one of the following values:

  • “Off” or 0 – Turns off the rule
  • “Warn” or 1 – Turn on the rule and use a warning level error: WARN (will not cause the program to exit)
  • “Error” or 2 – Enable the rule with error level: error (when triggered, the program will exit)
{
    "rules": {
        "eqeqeq": "off"."curly": "error"."quotes": ["error"."double"]}}Copy the code

The Settings can be placed in the.eslintrc.js file or in the eslintConfig section of the package.json file.

Reference: eslint.bootcss.com/docs/user-g…

webpack

Webpack is a static module bundler for modern JavaScript applications. When WebPack works with an application, it recursively builds a Dependency graph containing every module the application needs, and then packages all of those modules into one or more bundles.

Loader allows Webpack to handle non-javascript files (webpack itself only understands JavaScript), such as style-loader, CSS-loader, file-loader, etc. Loader can convert all types of files into valid modules that WebPack can handle, and then you can take advantage of WebPack’s packaging capabilities to process them.

The purpose of the plugin is to solve other things that loader cannot implement, such as generating HTML files (HtmlWebpackPlugin), limiting chunk size, resource replacement, etc.

Starting with WebPack V4.0.0, you don’t have to import a configuration file.

Reference: webpack.js.org

Set up the new project from scratch

Starting from 0

Create a project directory.

mkdir try-vscode
Copy the code

Class to create a default package.json file.

npm init -y
Copy the code

Create a. Vscode /settings.json file in the project directory for vscode project localization Settings.

{
  "editor.detectIndentation": false."editor.tabSize": 2
}
Copy the code

Setting up code formatting

Prettier-code Formatter install the plug-in prettier-code Formatter

Create the. Prettierrc file

{
  "tabWidth": 2."semi": false."singleQuote": true."printWidth": 120}Copy the code

You can also put these Settings in.vscode/settings.json.

{
  "prettier.semi": false."prettier.singleQuote": true."prettier.printWidth": 120,
  "prettier.tabWidth"2} :Copy the code

Code review

Install (do not install locally if you have already installed globally)

cnpm i eslint -S
Copy the code

Example Initialize the configuration file. eslintrc.js

npx eslint --init
Copy the code

Follow the prompts to select

? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)? Which framework does your project use? None of these ? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser, Node ? What formatdo you want your config file to be in? JavaScript
Copy the code

Once the setup is complete, the found error is displayed in VSCode’s code window and problem window.

Release NPM package

You need to register an account at npmjs.com and then add your account to your local PC using the NPM adduser command.

Execute the command in the project root directory.

npm publish
Copy the code

Json file. The main fields include name, Version, files, main, module, and so on. If the module field exists in package.json, it is used preferentially, and if no corresponding file is found, the main field is used and packaged according to the CommonJS specification. Each release must update the version number. You cannot directly update the existing version.

VUE project

If you have a front-end project for VUE, it is best to create the project directly with VUe-CLI so that you do not have to install the dependency packages separately.

vue-cli create try-vscode
Copy the code

After the project is successfully created, package.json and vue.config.js files are generated (you can specify other Settings as separate files during project creation).

If your project has a complex directory structure and a deep hierarchy of reference code, consider setting aliases in the vue.config.js file.

chainWebpack: config => {
    config.resolve.alias.set(The '@', resolve('/'))}Copy the code

jest.config.js

{
  moduleNameMapper: {
        '^ @ / (. *) $': '<rootDir>/$1'}}Copy the code

# Other articles in this series

Vue Project Summary (2) – Front-end independent testing

Vue Project Summary (3) – Cross domain problem analysis

Vue Project Summary (4) -API+ Token processing process