使用rollup和npm scripts构建完整javascript项目

使用rollup和npm scripts构建完整javascript项目

我写东西分2种,一种是代码,一种是文章,我还记得我刚学前端的时候特别喜欢写博客,不过后来都丢了,因为blog搬家什么的,后来干脆就不写了。最近又想写代码了,人一老就喜欢忘东西,最近用rollup弄了几个项目,做个记录。

去年吧,之前部门有个小伙伴推荐rollup,对比之后确实比webpack简单多了,最近又自己做了几套环境,写一下过程吧。

rollup是什么就不多介绍了,总之无论你用什么构建工具,最后的目的就是把模块化的代码组织起来在生成一个bundle,可能是一个入口,也可能是多个页面入口。

├── .git
├── .gitignore
├── .jsbeautifyrc
├── .jshintrc
├── .travis.yml
├── README.md
├── dist
├── docs
├── example
├── node_modules
├── package.json
├── rollup.config.js
├── scripts
├── src
└── test

目录结构比较简单,看名字就懂了,包括隐藏文件,这里主要说一下从0开始配置怎么搞。

$ mkdir yourproject && cd yourproject && mkdir docs dist example scripts src test

先把需要的目录先搞出来,然后创建一些依赖文件。

$ git init && git ignore *~ *swp *.swp .gitCOMMIT_EDITMSG *.svn node_modules/*

创建git仓库和ignore文件之后,创建travis文件用于push时自动集成,这里不说travis怎么配置,.travis.yml 文件内容很简单:

language: node_js
node_js:
  - "6.7.0"
before_script:
  - npm install -d

travis会自动去跑你的package里的pretest和test的script,下面看一下package的生成。

$ npm init

生成完package.json之后,按照习惯安装几个我写东西常见的dev模块和rollup:

$ npm install rollup rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-uglify rollup-watch pre-git npm-run-all mocha jshint chai babel-preset-es2015-rollup babel-preset-stage-0 babel-polyfill babel-plugin-transform-class-properties minimist --save-dev

大家用过的就不解释了,没用过的可以去npm上简单学习下每个module的用法和作用。

然后在scripts里增加一些项目脚本:

"scripts":{
    "pretest":"jshint -c .jshintrc src",
    "test":"mocha --compilers js:babel-core/register",
    "build":"rollup -c rollup.config.js",
    "beautify":"node ./scripts/beautify.js src test",
    "watch":"rollup -c -w"
}

当然你还可以根据需要自己调整一些工具,按照自己的习惯配置jshintrc和beatuify的规则,test使用mocha,增加编译功能,因为测试用例一般都是直接import的src的模块进行单元测试的,不编译根本带不起来,如果你的src代码本身就需要babel编译。

简单来说pretest检查语法是否符合jshint,test对代码进行单元测试,build使用rollup配置进行构建,beatuify是在commit之间格式化代码风格,上面安装npm-run-all可以快速的组合scripts,简化配置方便扩展。

下面看下beautify是怎么使用的,我们使用pre-git进行pre-commit的配置,在package.json中增加配置:

"config":{
    "pre-git":{
        "pre-commit":["npm run pretest","npm run beautify","git add ."]
    }
}

解释一下,我们在commit之前,先跑jshint对代码做检查,通过后再格式化所有提交部分,格式化后代码如果有format变化,我们重新add进去,然后再commit,其中pretest如果有错,则直接中断commit操作,给出提示。

我们看下beautify是怎么实现的,他是通过执行scripts目录下的beautify.js脚本进行操作的:

const fs = require('fs');
const path = require('path');
const child_process = require('child_process');
const minimist = require('minimist');
const argv = minimist(process.argv.slice(2));
const paths = argv._;

function isFile(path) {
    return exists(path) && fs.statSync(path).isFile();
}

function exists(path) {
    return fs.existsSync(path);
}


function beautify(file) {
    const command = `./node_modules/js-beautify/js/bin/js-beautify.js --config ../.jsbeautifyrc -P -E -j -a ${file} -r`;
    child_process.exec(command, (error, msg) => {
        console.info(msg.replace('\\n', ''));
    });
}

function read(beautifyPath) {
    for (let pathName of beautifyPath) {
        pathName = path.resolve(process.cwd(), pathName);
        if (isFile(pathName)) {
            beautify(pathName);
        } else {
            let files = fs.readdirSync(pathName);
            files = files.map((file)=>{
                return pathName + '/' + file;
            });
            read(files);
        }
    }
}

read(paths);

不多做解释,简单的递归进行beatuify操作,最后再输出结果。

然后我们看下正餐rollup的配置文件怎么来搞,其实为什么选择rollup和我喜欢rollup就是因为他的配置太简单了……

import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
import commonjs from "rollup-plugin-commonjs";

const isProduction = process.env.NODE_ENV === 'production';


export default {
    entry: 'src/index.js',
    format: 'umd',
    moduleName:'someGlobal',
    plugins: [
        commonjs(),
        babel({
            babelrc: false,
            exclude: 'node_modules/**',
            presets: ['es2015-rollup', 'stage-0'],
            plugins: ['transform-class-properties']
        }),
        (isProduction && uglify())
    ],
    dest: isProduction ? 'dist/index.min.js' : 'dist/index.js'
};

一个最基本单页js打包就这么配置,拿环境变量来做压缩和输出文件名控制。

如果你的应用是一个多页多bundle的项目,可以选择这个扩展:github.com/bahmutov/rol 扫描你的入口目录再配合这个就可以做到了。

如果你的项目有对css进行编译构建的需求,rollup也是支持的,写入行内的可以选择这个css module,最后写到页面head里的style中:

github.com/egoist/rollu

如果想单独输出css文件可以选择这个插件,是支持配置output设置的,会把import的css最后生成独立的css文件:

npmjs.com/package/rollu

恩,这教程是给我自己看的,写的并不是特别详细,希望给有想用rollup的同学一些启发和不知道如何初始配置一个javascript项目的一些参考。

想学更多好玩技巧的同学可以关注参与我3月的live,我带大家重构贴地气的业务代码。

zhihu.com/lives/8144623

「真诚赞赏,手留余香」
还没有人赞赏,快来当第一个赞赏的人吧!
文章被以下专栏收录
2 条评论