Node.js 中通过 babel 体验 ES6 模块化
打开CTRL+`打开终端
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save @babel/polyfill
创建项目跟目录创建文件 fig.js
const presets = [['@babel/env',{targets: {edge: '17',firefox: '60',chrome: '67',safari: '11.1'}}]
]ports = { presets }通过 npx babel-node index.js 执行代码
npx babel-node .index.js
默认导出 与 默认导入
let a = 10
let c = 20
let d = 30function show() {console.log('1111111111111')
}export default {a,c,show
}import m1 from './m1.js'
console.log(m1)
let a = 10
let c = 20
let d = 30function show() {console.log('1111111111111')
}export default {a,c,show
}export let s1 = 'aaa'
export let s2 = 'ccc'
export function say() {console.log('ooooooooo')
}// export default {
// d
// }
import m1, { s1, s2 as ss2, say } from './m1.js'console.log(m1)
console.log(s1)
console.log(ss2)
console.log(say)
直接导入并执行模块代码
for (let i = 0; i < 3; i++) {console.log(i)
}import './m2.js'
当前 Web 开发面临的困境
创建列表隔行变色项目
npm init -y
npm install jquery –S
import $ from 'jquery'
$(function() {$('li:odd').css('backgroundColor', 'blue')$('li:even').css('backgroundColor', 'lightblue')
})
<script src="./index.js"></script>
</head><body><input type="text" placeholder="ceshi" /><ul><li>这是第1个li</li><li>这是第2个li</li><li>这是第3个li</li><li>这是第4个li</li><li>这是第5个li</li><li>这是第6个li</li><li>这是第7个li</li><li>这是第8个li</li><li>这是第9个li</li></ul>在项目中安装和配置 webpack
npm install webpack webpack-cli –D
ports = {// 编译模式mode: 'development', // development production
"dev": "webpack
npm run devports = {mode: 'production' // mode 用来指定构建模式
}
main.js的大小大大变小，所以应该在上线前改为production
配置打包的入口与出口
const path = require('path')
ports = {mode: 'production', // mode 用来指定构建模式entry: path.join(__dirname, './src/index.js'),output: {path: path.join(__dirname, './dist'), // 输出文件的存放路径filename: 'bundle.js' // 输出文件的名称}
}
<script src="/bundle.js"></script>
生成新的bundle.js文件
配置 webpack 的自动打包功能
npm install webpack-dev-server –D
"scripts": {"test": "echo "Error: no test specified" && exit 1","dev": "webpack-dev-server"},
<script src="/bundle.js"></script>
npm run dev
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlguin = new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html'
})
ports = {mode: 'production', // mode 用来指定构建模式entry: path.join(__dirname, './src/index.js'),output: {path: path.join(__dirname, './dist'), // 输出文件的存放路径filename: 'bundle.js' // 输出文件的名称},plugins: [htmlPlguin]
}
在访问8080端口时可以直接看到预设置的页面
配置自动打包相关的参数
可以自动弹出，并改变浏览器的ip和端口
通过 loader 打包非 js 模块
webpack 中加载器的基本使用
打包处理 css 文件
npm i style-loader css-loader -D
module: {rules: [{ test: /.css$/, use: ['style-loader', 'css-loader'] }]}
}
li {list-style: none;
}
import './css/1.css'
打包处理 less 文件
npm i less-loader less -D
{ test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
body {margin: 0;padding: 0;ul {padding: 0;margin: 0;}
}
import './css/1.less'
打包处理 scss 文件
配置 postCSS 自动添加 css 的兼容前缀
const autoprefixer = require('autoprefixer')ports = {plugins: [autoprefixer]
} <input type="text" placeholder="ceshi" />
{ test: /.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
一种解决兼容的方式
打包样式表中的图片和字体文件
npm i url-loader file-loader -D
{ test: /.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, type: 'asset' }
#box {width: 580px;height: 340px;background-color: pink;background: url('../images/1.jpg');
}
由于我使用的 Webpack 的版本是 “webpack”: “^5.57.1” ，已经是 5.0 版本及以上了，而采用之前 5.0 版本以下的方法是行不通的；将use改为type设置才能使图片显示出来
class Person {static info = 'aaa'
}console.log(Person.info)
npm i babel-loader @babel/core @babel/runtime -Dnpm i @babel/preset-env @babel/plugin-transformruntime @babel/plugin-proposal-class-properties –D
ports = {presets: ['@babel/preset-env'],plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
} { test: /.js$/, use: 'babel-loader', exclude: /node_modules/ }
事实上没有配置前也成功加载了。待研究
传统组件的问题和解决方案
Vue 单文件组件的基本用法
<template><div><h1>这是 App 根组件</h1></div>
</template><script>
export default {data() {return {};},methods: {}
};
</script><style scoped>
h1 {color: red;
}
</style>
npm i vue-loader vue-template-compiler -D
import App from './components/App.vue'
const VueLoaderPlugin = require('vue-loader/lib/plugin')
{ test: /.vue$/, use: 'vue-loader' }
在 webpack 项目中使用 vue
npm i vue –S
import Vue from 'vue'const vm = new Vue({el: '#app',render: h => h(App)
})
<div id="app"></div>
"build": "webpack -p",
将dist目录删掉，会生成新的dist目录
打开可以看到正常显示
完成
本文发布于:2024-02-02 11:01:00，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170684285843353.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
