目录文件
## command 指令文件 ## lib -- 转义生成的代码 ## node_modules ## src -- 源代码 ## typings -- 类型声明文件 ## .gitignore ## index.js -- 进口文件 ## package.json ## tsconfig.json -- ts装备文件 ## readme.md
指令过程
分化(pars字符是什么ing) -> 转译(babel陈涉世家翻译github及原文) -> 紧缩(min字符距离加宽2磅怎么字符串是什么意思设置files)
React字符间距加宽2磅转化chromNPMe为ES5代码(包括一切ES6chrome什么意思转化为ES5代码)
中心是运用babel的一组预设 @babel/pgit教程难破mg5日剧rese字符是什么t-r字符型变量eact 来对react进NPM行转化，随后再运用 @babel/env 来进CSS行ES6 – ES5的转化女配每天都在抱大腿我女配没有求生欲txt宝书网要成仙
1.npm包内安装babel相关依赖
{
"devDependencies": {
"@babel/preset-react": "^7.13.13",
"@babel/cli": "^7.13.14",
"@babel/core": "^7.13.15",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.13.15",
"react": "^17.0.2",
"react-dom": "^17.0.2",
},
}
2. 装备bebel文件(babel7 -> babel.config.jsogiti轮胎n)
babel文件的chgiti轮胎rome浏览器安卓版下载读取次序是由下往上的
{
"presets": [
[
"@babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
],
[ "@babel/preset-react" ]
]
}
3. 运用babel指令进行转译
./node_modules/.bin/babel src --copy-files --out-dir lib --presets=@babel/env,@babel/preset-react
src – 转译src目Git录内女配没有求生欲txt宝书网的文件 –out-dir – 表明长沙市天气编译的类型是文件 –copy-files – 复制一份不进行编github永久回家地址译的文件到方针文件夹 –presets=@babe男配每天都在体内成绩l/env – 添加预设(@baChromebel/env,@babel/preset-react长沙市天气)
注意项
暂无。
这样就完结了对React文件和一切ES6的转化！
参阅链接: babel字符官网 如何运用ES6編写一个 React模块,并且编译后发布到NPM
运用fs + UglifyJ难破mg5日剧S字符串逆序输出完结对 .js 文件的紧缩与混杂
中心便是运用fchrome手机版s模块获取文件列表，递归获取文件信息并存储，然后在原来的架子上写入 .min.js 文件，最github永久回家地址后再将 .js 文字符是什么件删去
- 原来的架子是指在进行babel转化的时分现已将目录搭好，咱们只需求将新文件按原途径写入即可，省去了自己女配没有求生欲txt主动去字符距离加宽2磅创建文件夹的操作
废话gitlab不多说，直接女配没有求生欲txt上完整代码，调配注释便能理解。giticomfort是什么轮胎
let fs = require('fs');
let UglifyJS = require('uglify-js');
// .css 文件手动紧缩
function iGetInnerText(testStr) {
var resultStr = testStr.replace(/ +/g, ""); //去掉空格
resultStr = testStr.replace(/[ ]/g, ""); //去掉空格
resultStr = testStr.replace(/[rn]/g, ""); //去掉回车换行
return resultStr;
}
// 递归对每个文件进行写入
function writefs(obj, toPath, pPath = toPath) {
for (let i in obj) {
if (!fs.lstatSync(`${pPath + '/'}${i}`).isDirectory()) {
let tPath = pPath.replace(toPath, toPath)
fs.writeFile(`${tPath}/${obj[i].toFileName}`, obj[i].code, 'utf-8', function (err) {
if (err) throw err;
console.log('success');
if (i.indexOf('.js') > 0 || i.indexOf('.less') > 0) {
// 写入完结删去源文件
fs.unlinkSync(`${tPath}/${i}`)
}
})
} else writefs(obj[i], toPath, `${pPath + '/'}${i}`)
}
}
// 递归拿到一切文件，偏重命名、获取文件信息
function getAllFiles(pathTo, obj = {}) {
// 读取其时文件夹
let nowLevelFiles = fs.readdirSync(pathTo)
nowLevelFiles.forEach(i => {
// 判断是否是文件夹
if (!fs.lstatSync(`${pathTo}/${i}`).isDirectory()) {
let newI = i.replace('.js', '.min.js')
// 拿到文件内容
let fileContent = fs.readFileSync(`${pathTo}/${i}`, 'utf-8'), fileType = i.split('.')[1]
obj[i] = {
form: `${pathTo}/${i}`,
toFileName: newI,
// 假如是 .js 文件，运用 UglifyJS 进行紧缩，混杂，假如不是则运用正则消除空格
code: fileType === 'js' ? UglifyJS.minify({ [i]: fileContent }).code : iGetInnerText(fileContent),
}
} else obj[i] = getAllFiles(`${pathTo}/${i}`, {})
})
return obj
}
let Uglify = function (toPath) {
writefs(getAllFiles(toPath), toPath);
}
Uglify('./lib');
21-4-21
优化了一下 uglify.字符型变量jschrome官方下载 ，将指令文件归拢一字符常量处，愈加简练
新增getFil女配每天都在为国争光echrome官方下载s.js
let fs = require('fs');
module.exports = function getFiles(path) {
let files = []
getAllFiles(path)
// 递归拿到一切文件，偏重命名、获取文件信息
function getAllFiles(path) {
// 读取其时文件夹
let nowLevelFiles = fs.readdirSync(path)
nowLevelFiles.forEach(i => {
// 判断是否是文件夹
if (!fs.lstatSync(`${path}/${i}`).isDirectory()) {
files.push({fileName: i, path: `${path}/${i}`, parentPath: path})
} else getAllFiles(`${path}/${i}`, {})
})
}
return files
}
优化字符间距加宽2磅 uglify.js 简略来说便是字符间距加宽2磅怎么设置将递归获取一切文件的过程摘了出去，作为一个功用函数来运用，愈加契合 “美感”(?)。然后便字符常量是多了一个筛选，能够挑选不进行紧缩的文件。
let fs = require('fs');
let UglifyJS = require('uglify-js');
let getFiles = require('./getFiles')
const noCompress = ['JSBriged.js'] // 不需求紧缩的文件称号
// .css 文件手动紧缩
function iGetInnerText(testStr) {
var resultStr = testStr.replace(/ +/g, ""); //去掉空格
resultStr = testStr.replace(/[ ]/g, ""); //去掉空格
resultStr = testStr.replace(/[rn]/g, ""); //去掉回车换行
return resultStr;
}
// 对每个文件进行写入
function writefs(obj, toPath, pPath = toPath) {
let allFiles = getFiles(toPath)
for (let i in obj) {
fs.writeFile(obj[i].newPath, obj[i].code, 'utf-8', function (err) {
if (err) throw err;
console.log('success');
if (i.indexOf('.js') > 0 || i.indexOf('.less') > 0) {
// 写入完结删去源文件
fs.unlinkSync(obj[i].form)
}
})
}
}
// 拿到一切文件，偏重命名、获取文件信息
function setFiles(pathTo) {
let allFiles = getFiles(pathTo)
let obj = {}
allFiles.map((item, index) => {
// 扫除
if (noCompress.indexOf(item.fileName) !== -1) return
let newI = item.fileName.replace('.js', '.min.js')
// 拿到文件内容
let fileContent = fs.readFileSync(item.path, 'utf-8'), fileType = item.fileName.split('.')[1]
obj[item.fileName] = {
form: item.path,
toFileName: newI,
newPath: `${item.parentPath}/${newI}`,
// 假如是 .js 文件，运用 UglifyJS 进行紧缩，混杂，假如不是则运用正则消除空格
code: fileType === 'js' ? UglifyJS.minify({ [item.fileName]: fileContent }).code : iGetInnerText(fileContent),
}
})
return obj
}
let Uglify = function (toPath) {
writefs(setFiles(toPath), toPath);
}
Uglify('./lib');
21-5难破mg5日剧-31 — 按需giti轮胎加载
前几天完成了按需加载，chrome安卓下载今日男配每天都在体内成绩记载一下完成办法
step1: 更改一切文件内的导出办法
递归导入一切模块。由于第二步需求运用fs进行操作，所以导github永久回家地址出需求node辨认，也字符型变量便字符是运用commonJS导入导出 (module.giti轮胎exports = {git教程导出的模块})
step2: 别离(parsing)
一切模块引进之后，chrome浏览器运用 递归 + fs模块 将长沙市疫情最新情况每个办法(fn)循git命令环生成到文件夹(原文件名)内部，每个办法额定拼接 export default，中途记载每个文件的称号及途径github中文官网网页，在生成结束之后动态生成 index.js ，运用模版字符串陈思思chrome什么意思动态将每个文件以ES6办法导入导giticomfort是什么轮胎出
由于react组件的特长沙市疫情最新情况殊性(.jsx 内部引进re字符act(主要原因) ) 不参加切割，本女配每天都在抱大腿我要成仙身进行开发的时分就以模块办法开发，不聚一同。 所字符型变量以在这里直接CSS越过切割，只进行文件复giticomfort是什么轮胎制(c字符间距加宽2磅怎么设置opyFiles)
// parsing.js
const fs = require('fs');
const path = require('path')
const getFiles = require('./getFiles')
const copyFiles = require('./copyFiles')
/*
导入主文件
获取一切导出值
运用fs遍历生成新文件
新建一个外部index，将一切遍历生成的文件引进其中 动态模版生成
*/
// index.js 到方针 文件的途径
class Parsing {
// originPath - 源途径 targetPath - 方针途径 mainPath - 进口文件途径
constructor(originPath, targetPath, mainPath) {
this.path = originPath
this.fileDetail = {} // 文件途径数据存储
this.storePath = './lib/' // 终究文件存储途径
this.resolvePath = targetPath
this.indexPath = mainPath
}
init() {
try {
fs.mkdirSync(this.resolvePath)
} catch { }
// react component 复制一份到方针文件夹，不参加切割
copyFiles(this.path, this.resolvePath, 'ReactComponents')
// 拿到一切方针目录及自文件途径集合
let files = getFiles(this.path)
// 扫除 不是 .js 后缀办法文件 扫除 react component 别的处理
files = files.filter(item => {
let parentN = item.parentPath.split('/')
return path.extname(item.fileName) === '.js' && parentN[parentN.length - 1] !== 'ReactComponents'
})
// 拿到其时文件夹下的一切文件 目前仅一层，若优化运用递归
for (let file of files) {
// 获取文件内的一切导出
let fileExportFnList = require(file.path)
let dirName = file.fileName.split('.')[0]
// 写入文件夹
try {
fs.mkdirSync(`${this.resolvePath}/${dirName}`)
} catch { }
// 遍历生成新文件
this.mkFile(fileExportFnList, dirName)
}
this.createIndex()
}
// 遍历生成新文件
mkFile(fileExportFnList, dirName) {
let dirDatas = []
for (let i in fileExportFnList) {
let exportFn = fileExportFnList[i]
dirDatas.push({
path: `${this.storePath}${dirName}/${i}.js`,
name: i
})
let filePath = `${this.resolvePath}/${dirName}/${i}.js`
fs.writeFileSync(filePath, 'export default ' + exportFn, 'utf-8')
}
// 记载每一个文件内一切导出模块(新文件)的途径及模块称号
this.fileDetail[dirName] = dirDatas
}
//主动生成index.js
createIndex() {
let contentData = ''
let exportCon = ''
let fileD = this.fileDetail
let RCFiles = getFiles(`${this.resolvePath}/ReactComponents`)
// 筛选出后缀仅为 .jsx 的文件 且对后缀进行替换并将格局与 fileDetail 同步
RCFiles = RCFiles.filter(i => path.extname(i.fileName) === '.jsx').map(j => {
return {
path: `${this.storePath}${j.path.split('separate')[1].replace('.jsx', '.js')}`,
name: j.fileName.split('.jsx')[0]
}
})
fileD = { ...fileD, 'ReactComponents': RCFiles }
let dirNames = ''
// 兼并一致处理进口文件的导入
for (let dir in fileD) {
let names = ''
dirNames += dir + ', '
let files = fileD[dir]
for (let i = 0; i < files.length; i++) {
let { name, path } = files[i]
names += name + ', '
contentData +=
`
import ${name} from '${path}'
`
}
// 版别向下兼容，将一个文件中的一切模块包裹一同，键名为文件称号
contentData +=
`
let ${dir} = { ${names.slice(0, names.length - 2)} }
`
exportCon += names
}
// 删去额定 , 号
exportCon = exportCon.slice(0, exportCon.length - 2)
dirNames = dirNames.slice(0, dirNames.length - 2)
let finallyData =
`
${contentData}
export { ${exportCon}, ${dirNames} }
`
// 兼并后写入
fs.writeFileSync(this.indexPath, finallyData, 'utf-8')
}
}
const parsing = new Parsing(
path.resolve(__dirname, '../src'),
path.resolve(__dirname, '../separate'),
path.resolve(__dirname, '../index.js')
)
parsing.init()
step3 babel转化
这个点主要注意的是在babel转化时需求将转化模块更改为 ES6导入导出(默许c长生十万年ommonJS)
babel.config.json
{
"presets": [
[
"@babel/preset-env",
{
"modules": false // 更改为 ES6导入导出
}
],
["@babel/preset-react"]
]
}
step4 uglify紧缩
和之前一样，不贴代gitlab码了
小结
之所以将第一、Chrome第三步分隔，主要仍是node不辨认ES6导入导出chrome手机版，所以只能自己以cmooonJS办法去导出，然后在拆分时再前设 export default，长沙市疫情最新情况这样便契辰时是几点合了 t男配每天都在体内成绩reeshaking 的前置要求
22-4-8 ts转化NPM – 1.5.0
这次gitee更新主要是想对ts下手，其他的都是临时加上去的，只不过到后来反而是重构指令文件占了大头，由于.jsx和.js 转化为 .tsx 和 .ts 之后，别离(parsing.js)过程也要进行对应的更改，昨天着实让我头痛了chrome什么意思一下处理办法，不过好chrome手机版在最后都找到了处理办法HAHA.
1 运用styled-component之后babel时发生github永久回家地址的化学反应
这个姿字符串逆序输出态： 在一个CSS .tsx 组件中运用styled-compo女配每天都在为国争光nent插件，然后t女配没有求生欲txtsx转译成comchrom字符串逆序输出emonJS的ES5(target)仓鼠饲养八大禁忌格局内容chrome什么意思，在项目中运用的时分报错，显示 React is not defined，查看男配每天都在体内成果问题之后chrome官方下载发现是styled-co仓CSS鼠养殖八大忌讳mpchrome浏览器安卓版下载onent生成的diCSSv被辨认成React组件
最难破mg5日剧后在找材料(baidu)的时分字符串逆序输出，发现babel有对此插件的处理：在babel装备文件中添加plugins： "babel-plugin-stchrome什么意思yled-components" 然后用b字符间距加宽2磅abel编译即可
其实女配没有求生欲txt我在发现tsc能够直接转chrome译es5内容时chrome什么意思，我是想要放弃babel的-。= 还好没有手快吧babelgitlab的处理删掉，否则直接裂开
2.tsconfig.json无法重用
我之前是吧 devtools.js和 regModules.js 手动改成 module.exports 的导出办法，然后再有parsing.js别离时手动改为 export default女配每天都在抱大腿我要成仙 模式，然后ReactComponents内的内容不参加别离，就会在别离后与被别离的文件们同步导出办法。
可是现在由于 tsc 是一致去处理模块代难破mg5码的，就出现了一个很为难的情况：当我在tsconfig.json中装备module为none时，deChromevtools和regMochrome手机版dules的内容时能够正常编译的，女配满眼都是钱而Reactchrome浏览器Component的内容则被编译成了module.eNPMx难破mg5ports办法，然后react组件无法参加组件，就会导致babel时报错，无法引进..
其时我看到这个问题人直接就麻了，最开端想要chrome浏览器安卓版下载分别搞两个装备文件去处理不同情况，可是这样的话指令归拢就行不通了，而且在生成终究文件时会CSS异常费事，这显然是不契合预期的，所以在我翻了很多材料之后，忽chrome浏览器无法上网然想到，我能够去通过nochrome安卓版de去改写内容啊！Chrome 然后就有了现在的处理逻辑
但我预感，这不是终究的处理办法chrome安卓版，我觉得还字符串是什么意思有愈加快捷的，只ch长沙师范学院rome浏览器无法上网不过我没有发现罢了字符距离在哪里设置，当然这是今后更新的事情啦~
代码：
const TSConfig = require('../tsconfig.json')
// 第一步将ReactComponents以外的文件以默许格局转译
TSConfig.compilerOptions.module = 'none'
// 将首位替换为src
TSConfig.include.splice(0, 1, 'src')
// 扫除ReactComponents下的一切文件
TSConfig.exclude.push('src/ReactComponents/**')
// 写入
fs.writeFileSync(path.resolve(__dirname, '../tsconfig.json'), JSON.stringify(TSConfig), 'utf-8')
// 运转
exec('tsc', () => {
console.log('tsc Success!');
nextTsc()
})
// 第二步 仍旧tsc，只不过只转译 ReactComponents 文件夹内的文件，将格局改为 ES格局，用于下一步导出(由于react组件不参加别离，所以在这一步就得和其他办法在同一同跑线。概况看parsing.js逻辑)
const nextTsc = () => {
TSConfig.compilerOptions.module = 'ESNEXT'
TSConfig.include.splice(0, 1, 'src/ReactComponents')
TSConfig.exclude.pop()
fs.writeFileSync(path.resolve(__dirname, '../tsconfig.json'), JSON.stringify(TSConfig), 'utf-8')
exec('tsc', () => {
console.log('next tsc Success');
})
}
tscchrome安卓下载onfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"outDir": "build",
"module": "ESNEXT",
"target": "ESNEXT",
"lib": ["es5", "dom"],
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": ".",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"importHelpers": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"noEmit": false
},
"exclude": ["node_modules", "jest"],
"include": ["src/ReactComponents", "typings"],
"types": ["commonjs"]
}
3. 指令文件重构
这次之所以想chrome浏览器安卓版下载这么做，是由于github永久回家地址之前去生成最后的难破mg5日剧lib太费事了，是在是受不了，找了找node的办法男配每天都在体内成果集合长沙市天气，果然被我找到了处理办法，其实上文就现已写出来了HAHA，没错儿便是exec and execSync！
有这个办法之后，我就讲执行过程依次写到了一个文件内，到时要想生成新的lib直接去node 文件 就好了，多方便~
// start.js
const fs = require('fs')
const path = require('path')
const { exec, execSync } = require('child_process');
const { delFiles } = require('./controlFile')
const TSConfig = require('../tsconfig.json')
// 第一步将ReactComponents以外的文件以默许格局转译
TSConfig.compilerOptions.module = 'none'
TSConfig.include.splice(0, 1, 'src')
TSConfig.exclude.push('src/ReactComponents/**')
fs.writeFileSync(path.resolve(__dirname, '../tsconfig.json'), JSON.stringify(TSConfig), 'utf-8')
// tsx编译
exec('tsc', () => {
console.log('tsc Success!');
nextTsc()
})
// 第二步 仍旧tsc，只不过只转译 ReactComponents 文件夹内的文件，将格局改为 ES格局，用于下一步导出(由于react组件不参加别离，所以在这一步就得和其他办法在同一同跑线。概况看parsing.js逻辑)
const nextTsc = () => {
TSConfig.compilerOptions.module = 'ESNEXT'
TSConfig.include.splice(0, 1, 'src/ReactComponents')
TSConfig.exclude.pop()
fs.writeFileSync(path.resolve(__dirname, '../tsconfig.json'), JSON.stringify(TSConfig), 'utf-8')
exec('tsc', () => {
console.log('next tsc Success');
nextStep()
})
}
// 接下来就按过程走就好了
const nextStep = () => {
// 清空lib
delFiles(path.resolve(__dirname, '../lib'))
// 别离
execSync('node ./command/parsingJs.js')
console.log('parsing Success!');
// 转译
execSync('./node_modules/.bin/babel separate --copy-files -d lib')
console.log('babel Success!');
// 紧缩
execSync('node ./command/uglify.js')
console.log('mifiles Success!');
// 删去之前留传的无用文件夹
delFiles(path.resolve(__dirname, '../build'))
delFiles(path.resolve(__dirname, '../separate'))
console.log('delete Success!');
}
这里边你也看到了字符间距怎么加宽，我将关于文件控制的办法悉数合Git并在了一个文件内，看着清净多了。
delFiles办法其实是getF字符iles的长沙市天气变种，用于删去方针文件夹及内部的一切文件，就不拿出来了。
4.ts转化
主要讲一个问题：
在将办法的github永久回家地址函数转化为箭头函数格局(con字符距离怎么加宽st a = () =chrome浏览器无法上网> {}) 后，进行 别离 过程时，部分办法失效，报错为： xxx is not defined.
很经典的报错了，我以chromebook为是我的办法写错chrome安卓下载了，检查往女配每天都在抱大腿我要成仙后并没有问题，那么问题就大了长沙市疫情最新情况，这究竟是什么引发的？？？
经过排查，仓chrome什么意思鼠养殖八大忌讳锅仍是得有箭头函数来背-。=
由于箭头函数在par女配没有求生欲藤萝长沙市疫情最新情况为枝sing内获取到的时分，是不包括const a = 这部分的，直接便是一个匿名函数，然陈涉世家翻译及原文后再直接进行拼字符距离接 就成了export def仓鼠养殖八大忌讳ault () => {} 这个姿态chrome什么意思，而那些出问题的函数，都是调字符距离用了自身的，男配每天都在体内成绩也便是用了递归的办法，仓鼠寿命递归内部调用自己，成果自己是个匿名函数hhh，不报错都难
最后的处理办chrome浏览器安卓版下载法便是将那些运用了递归的办法回归 function 声明，也就处理了。
别离(parsingchrome官方下载.js)改的不多，主要就组件部分从头改了一下后缀和方针地址，其他的不变，就不再贴代码了
小结
这次本来是奔着ts来的，成果嘛… 指令文件废了蛮多的时间，ts部分大多都是死功夫，没什么含量，改的还算顺NPM畅吧，再加一些办法组件什么的，也不之后今后还更不更这个包，究竟想要的功用都现已完成了.. 看今后有没有新点子咯~女配没有求生欲藤萝为枝
评论(0)