美文网首页
npm scripts

npm scripts

作者: 回凉_4161 | 来源:发表于2017-11-29 10:31 被阅读0次

    在一定程度是,你无论如何都要使用npm,而同时npm提供了脚本功能,所以你在命令行中使用的命令都可以在 npm Scripts 中使用。你可以通过使用npm scripts替代gulp 这篇文章来了解npm scripts(相比gulp这类工具)的好处。

    你可以克隆我的demo来查看npm-scripts-demo

    1. npm scripts?

    npm scripts 是记录在 package.json 中的 scripts 字段中的一些自定义脚本,使用自定义脚本,用户可以将一些项目中常用的命令行记录在 package.json中,不需要每次都要敲一遍。

    {

        // ...

        "scripts": {

            "build": "node build.js"

        }

    }

    终端运行npm run build 等同于 node build.js

    小技巧

    通过 npm run 来查看所有的 scripts 命令

    通过 npm ls --depth 0 列出已安装的 package

    通过 npm run env可以列出当前项目的所有环境变量(通过 env 可以列出系统的所有环境变量)

    2. package.json配置

    {

        "name": "npm-scripts-demo",

        "version": "1.0.0",

        "description": "",

        "main": "index.js",

        "scripts": {

            "presass": "echo before run sass",

            "sass": "node-sass src/style/index.scss src/dest/index.css",

            "postsass": "echo after run sass && echo $PATH",

            "remove" : "rm -rf src/dest",

            "scss": "node-sass --output-style compressed -o src/dist/css src/style",

            "lint": "eslint src/js",

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

            "view": "echo $npm_package_name",

            "viewjs": "node src/js/view.js"

    },

        "devDependencies": {

            "eslint": "^4.12.0",

            "node-sass": "^4.7.2",

            "uglify-js": "^3.2.0"

        },

        "author": "",

        "license": "ISC"

    }

    3. 工具

    node-sass: 解析scss文件

    eslint: 代码检查

    uglify:压缩js代码

    onchange:监听文件变化

    4. 环境变量PATH

    环境变量($PATH):决定了shell将到哪些目录中寻找命令或程序,PATH的值是一系列目录,当运行一个程序时,Linux在这些目录下进行搜寻编译链接。通过运行 echo $PATH 查看当前的搜索路径。运行npm run env可以列出所有环境变量。

    npm 脚本的原理:当执行npm run,就会自动新建一个 Shell,在这个 Shell 里面执行指定的脚本命令。因此,只要是 Shell可以运行的命令,就可以写在 npm 脚本里面。

    脚本执行之前它会将node_modules/.bin/加入到环境变量PATH中,所以在 npm scripts 中可以直接使用那些存在于node_modules/.bin/中的可执行文件。执行结束后,再将PATH变量恢复原样。

    可以:

    "sass":"node-sass src/style/index.scss src/dest/index.css",

    而不用:

    "test":"./node_modules/.bin/node-sass src/style/index.scss src/dest/index.css"

    运行 npm run sass 来查看环境变量的变化。

    5. 钩子

    在 npm script 中存在两个钩子,pre和post,sass脚本命令的钩子就是presass和postsass

    "presass": "echo before run sass",

    "sass": "node-sass src/style/index.scss src/dest/index.css",

    "postsass": "echo after run sass",

    npm提供的默认钩子:

    prepublish, publish, postpublish:发布模块

    preinstall, install, postinstall:安装模块

    preuninstall, uninstall, postuninstall:卸载模块

    preversion, version, postversion:在使用npm version 修改版本号的时候执行

    pretest, test, posttest:执行 npm test 的时候

    prestop, stop, poststop:执行 npm stop 的时候

    prestart, start, poststart:执行 npm start 的时候

    prerestart, restart, postrestart:执行 npm restart 的时候

    6. 变量

    通过npm_package_前缀,npm 脚本可以拿到package.json里面的所有字段。比如,对于上面第2点的package.json,

    // view.js

    console.log(process.env.npm_package_name); //  npm-scripts-demo ,

    console.log(process.env.npm_package_version); // 1.0.0

    console.log(process.env.npm_package_scripts_lint); // eslint src/js

    运行 npm run viewjs

    参考:

    为什么使用 npm Scripts 构建项目

    npm scripts 使用指南

    相关文章

      网友评论

          本文标题:npm scripts

          本文链接:https://www.haomeiwen.com/subject/nsgjbxtx.html