konghouy 2019-06-28
在网页比较简单的时代,以文件可以包含 HTML、CSS、JS;到后来结构、样式、行为的分离,文件开始多起来,慢慢的出现了AMD,CMD ,CommonJS,ES6 Module等,技术变化日新月异,把这些技术统一整合起来,就是工程化。
引用网上一作者的话:
github地址:node-sass
首先安装node-sass
npm install node-sass
运行命令行,就能将scss
文件变成css
文件
npx node-sass src/css/style.scss dist/css/style.css
当我scss
文件变动,自动更新为css
文件
npx node-sass src/css/style.scss -w dist/css/style.css
生成map
文件
npx node-sass src/css/style.scss -w dist/css/style.css --source-map true
在这里遇到最大的问题是没有弄清楚全局安装和局部安装,陷入了好久npm install -g node-sass
是全局安装,可以直接使用node-sass
npm install node-sass
是局部安装,使用时需要加上相对路径./node_modules/.bin/node-sass
;或者使用npx node-sass
,npx
可以快速找到相对路径。
提示no such file or directory, open '/Users/mac/package.json'
,是因为缺少package.json
这个文件。
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\fanzm1\workspace\Astone\0115_NodeJS\package.json' //首先,初始化项目,一路回车就行 npm init -f //接着安装依赖 npm install formidable --save
官方网址:babel
首先安装babel
npm install --save-dev babel-cli babel-preset-env
创建一个.babelrc
文件,写上
{ "presets": ["env"] }
在创建一个package.json
文件,方法:npm init
一路回车
打开package.json
,添加上内容
{ "devDependencies": { "babel-cli": "^6.0.0" } }
运行下面这句就可以将js
文件进行翻译
./node_modules/.bin/babel src/js -d dist/js
当我src/js
文件有变动,自动更新为dist/js
文件
./node_modules/.bin/babel src/js -d dist/js -wtach
今天其他文件,比如image
,html
等不需要翻译的文件
地址:watch-cli
安装watch-cli
npm i -g watch-cli
使用,只要文件改动动就会拷贝到dist
目录里
watch -p "src/images/**/*" -c "cp -r src/images dist/images" watch -p "src/index.html" -c "cp src/index.html dist/index.html"
每一种文件都有一个工具,造成每一种文件都需要开一个窗口,导致很乱,这时webpack
出现了,把这些整合在一起
webpack官网:webpack
首先npm init
,初始化出一个package.json
安装webpack
npm install --save-dev webpack
运行npx webpack
会让你安装package-cli
创建并编辑文件webpack.config.js
const path = require('path'); module.exports = { mode: 'production', entry: './src/js/app.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist/js') }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] } };
app.js引用其他文件
import module1 from './module-1' import module2 from './module-2' module1() module2()
被引用的文件
function fn(){ alert(1) } export default fn /************/ function fn(){ console.log(2) } export default fn
现在可以把 JS 文件拷贝过去,还不能实现翻译
官网:babel-loader
安装
npm install "babel-loader@^8.0.0-beta" @babel/core @babel/preset-env webpack
配置webpack.config.json
文件的rules
部分
{ test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: [require('@babel/plugin-proposal-object-rest-spread')] } } }
官网:sass-loader
安装
npm install sass-loader node-sass webpack --save-dev
编辑配置webpack.config.json
文件的rules
部分
{ test: /\.scss$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader", options: { includePaths: ["absolute/path/a", "absolute/path/b"] } }] }
如果报错提示什么安装什么npm install ...
。
github地址:PostCSS Loader
处理 CSS 兼容问题,在属性面前自动加前缀。
安装
npm i -D postcss-loader
编辑文件postcss.config.js
module.exports = { //parser: 'sugarss', //可以不要 plugins: { //'postcss-import': {}, //可以不要 //'postcss-preset-env': {}, //可以不要 'postcss-cssnext': {} //'cssnano': {} //可以不要 } }
编辑文件webpack.config.json
文件的rules
部分
use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, //重点这句 { loader: 'postcss-loader'}, //重点这句 'sass-loader' ]
如果报错提示什么安装什么npm install ...
。
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT