We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
本文主要通过4个点来讲述现在前端的工作开发流程
我们一般使用autoprefixer来给我们写的css自动添加前缀,来配合不同浏览器的区别。
aotoprefixer官网 介绍了它是postcss的一个插件,所以我们可以通过postcss来使用autoprefixer来自动添加前缀。postcss官网链接 介绍了怎么使用autoprefixer
postcss
autoprefixer
npm run/cli
To use PostCSS from your command-line interface or with npm scripts there is postcss-cli.
postcss-cli
postcss --use autoprefixer -c options.json -o main.css css/*.css
意思:
c opitons.json
-o main.css
--dir/--replace
css/*.css
use autoprefixer
npm install -g postcss-cli // 一般文件-cli就是命令行安装
// 把src下面的所有的css打包dist文件夹下面 postcss --use autoprefixer --dir dist src/*.css // 把src下面的所有css都打包到output文件夹下面并监听它的改变,动态的编译生产。 postcss --use autoprefixer --dir output src/*.css --watch
现在分别有三种可以来检查语法的插件。 jshint jslint eslint 流行的现在是eslint
jshint
jslint
eslint
npm install -g eslint
eslint src/event.js
看见命令行提示我们需要使用eslint --init 进行初始化
eslint --init
会在目录下面创建一个eslintrc.js, 根据这个配置我们来检查自己的js,安装期间出现了一个问题
eslintrc.js
安装过程和问题
在配置文件里指定环境,使用 env,指定你想启用的环境,设置它们为 true。例如,以下示例启用了 browser 和 Node.js 的环境:
env
true
{ "env": { "browser": true, "node": true } }
// .eslintrc.js module.exports = { "extends": "standard", "env": { "browser": true, "node": true }, rules: { 'space-before-function-paren': 'off', "no-compare-neg-zero": "off", "no-useless-escape": "off", "indent": "off", "semi": "off", "space-before-blocks" : 'off', "space-infix-ops": "off", "no-trailing-spaces": "off" } };
uglify官网
npm install -g uglify-js
uglifyjs --compress --mangle -- input.js
总结 发现它并不兼容es6的语法,所以我们需要先把es6转换成es5
es6
es5
babel官网
babel-cli 官网
npm install -g babel-cli // 检查是否安装成功 which babel
touch .babelrc
npm install -D babel-preset-env
// z转换src下面的a.js babel src/a.js // 把转换后的代码放到dist下面的a.js babel src/a.js > dist/a.js // 转换并压缩 把前面的输出内容当做后面的输入内容 babel src/a.js | uglifyjs // 转换压缩并生成文件 babel src/a.js | uglifyjs > dist/a.js // 把src下面所有的js分别转换到dist目录下 babel src --out-dir dist // 把src的所有js集合打包到dist下面的index.js babel src --out-file dist/index.js
// 删除之前打包的,并全部执行 rm -rf dist/*; postcss --use autoprefixer --dir dist/ src/*.css; eslint src/*.js && babel src/a.js | uglifyjs > dist/a.js; echo "success"
// windows可以需要这样启动eslint rm -rf dist/*; postcss --use autoprefixer --dir dist/ src/*.css; node_modules/.bin/eslint src/*.js && babel src/a.js | uglifyjs > dist/a.js; echo "success"
The text was updated successfully, but these errors were encountered:
No branches or pull requests
前端工程化实现
本文主要通过4个点来讲述现在前端的工作开发流程
CSS自动加前缀
我们一般使用autoprefixer来给我们写的css自动添加前缀,来配合不同浏览器的区别。
aotoprefixer官网 介绍了它是
postcss
的一个插件,所以我们可以通过postcss来使用autoprefixer
来自动添加前缀。postcss官网链接 介绍了怎么使用autoprefixernpm run/cli
To use PostCSS from your command-line interface or with npm scripts there is
postcss-cli
.意思:
c opitons.json
-o main.css
,如果有多个输入文件需要使用--dir/--replace
css/*.css
autoprefixer
--use autoprefixer
1.全局安装postcss-cli
2. 打开命令行,切换到对应的目录,使用postcss来添加前缀
js语法检查
现在分别有三种可以来检查语法的插件。
jshint
jslint
eslint
流行的现在是eslint
1. 全局安装eslint
2. 如果没有配置文件直接检查
看见命令行提示我们需要使用
eslint --init
进行初始化会在目录下面创建一个
eslintrc.js
, 根据这个配置我们来检查自己的js,安装期间出现了一个问题安装过程和问题
3. 开始配置
在配置文件里指定环境,使用
env
,指定你想启用的环境,设置它们为true
。例如,以下示例启用了 browser 和 Node.js 的环境:文件压缩uglifyjs
1. 全局安装
uglify官网
2. 使用
总结 发现它并不兼容es6的语法,所以我们需要先把
es6
转换成es5
ES6转换成ES5
babel官网
babel-cli 官网
1.全局安装
2. 创建一个.babelrc
3. 局部安装babel-preset-env
4. 开始使用转换
总结全部命令行
The text was updated successfully, but these errors were encountered: